Search code examples
cssfont-awesomefont-awesome-4

Font awesome background color is overflown

I want to set background color for a fontawesome icon :

.vert {
      background: springgreen;
    }
...
return '<i class="fa fa-circle-thin vert"></i>';

At runtime I get this :

enter image description here

So how to fill just the interior of the circle ?

Solution

  • You can use stacked icons. 

    .vert {
  color: springgreen;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css">


<span class="fa-stack">
  <i class="fas fa-circle vert fa-stack-2x"></i>
  <i class="far fa-circle  fa-stack-2x"></i>
</span>

    Using Layers in Font Awesome 5

    This feature requires that you use SVG + JS version of Font Awesome 5.

    .vert {
  color: greenyellow;
}
    <script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" data-search-pseudo-elements></script>

<div class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-circle vert" ></i>
    <i class="far fa-circle"></i>
  </span>
</div>