Search code examples
htmlcssfontsfont-awesomewebfonts

Style font over fontawesome icon

Building on this post... Font over font awesome icon

Fiddle

<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
  <span class="fa fa-stack-1x" style="color:red;">
      <span style="font-size:35px; margin-top:-20px; display:block;">
          #1
      </span>
</span>

I want the "1" inside the trophy to look like this...❶ ... its a "1" inside a black circle, similar like a numbered billiard ball and I want to be able to CSS style it, color, size, border, etc. Is that possible to achieve? This ❶ is a symbol I copied from Word.

Solution

  • HTML:

    <span class="fa-stack fa-3x">
    <i class="fa fa-trophy fa-stack-2x"></i>
      <span class="fa fa-stack-1x" style="color:red;">
          <span>
              #1
          </span>
    </span>
</span>

    CSS:

    .fa-trophy ~ .fa{font-size:35px;margin-top:13px;display:block;position:relative}
.fa-trophy ~ .fa span{background:#fff;color:red;border-radius:50%;width:24px;height:24px;text-align:center;font-size:20px;line-height:20px;display:block;padding:4px;position:absolute;top:16%;left:0;right:0;margin:auto}

    Let me know if that's along the lines of what you had in mind.