Font Awesome Background color

Question

When using the brilliant Font Awesome, how can I make the icons not transparent - for instance if I want to use http://fortawesome.github.io/Font-Awesome/icon/chevron-circle

Answer 1

I have another hack for people who are still interested:

<i class="fa fa-chevron-circle-up fa_with_bg"></i>

And the css:

.fa_with_bg{
    position: relative;
}

.fa_with_bg::after{
    position: absolute;
    content: '';
    background: #fff;
    z-index: -1;
    top: 10px;
    left: 3px;
    width: 35px;
    height: 33px;
}

You just need to add the fa_with_bg class to it.
* You may have to play a little with the top,left,width and height properties.

Answer 2

White background scales from a font size 1px to 150px for fa-plus-circle.

// Note: Change background color to match your criteria

// SCSS
.fa-bg-white {
  position: relative;

  &:before {
    position: relative;
    z-index: 1;
  }

  &:after {
    position: absolute;
    content: '';
    background: #FFF;
    border-radius: 50%;
    z-index: 0;
    top: 10%;
    left: 10%;
    width: 75%;
    height: 75%;
  }
}


// HTML
<i class="fa fa-plus-circle fa-bg-white"></i>

Answer 3

UPDATE: As xavier pointed out below, font-awesome has Stacked Icons which will let you put a circle behind an icon without using a hack. Essentially, you stack whichever icon you want on top of their fa-circle icon. You can then style the circle independently from the icon and change it to whatever color you'd like.

Here's an example based off of code from their site:

.fa-circle {
  color: black;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-chevron-up fa-stack-1x fa-inverse"></i>
</span>

ORIGINAL ANSWER: Unfortunately, the whole icon is considered a single "character" on the page and as such, you don't have that granular of control over it. You can simply set a single "color" property to set the color of the character/icon to be what you want.

Now, it is possible for a creative hack though. Since the middle of the character is transparent, you can set a colored background behind the character to make it appear that the middle is a different color by doing something like this:

    <i class="fa fa-chevron-circle-up"></i>

then in your CSS:

.fa-chevron-circle-up {
  background: yellow;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

If the background circle offsets the icon, you can use line-height to fix it.

Answer 4

The most simple solution i found was to just use the background with radial-gradient. HTML:

<i aria-hidden="true" class="fa fa-arrow-alt-circle-up fa-3x"></i>

CSS:

.fa{
    color: red; 
    background: radial-gradient(grey 50%, transparent 50%);
}

You can just change out the colors you desire, or selectors but this will prevent the background color from going over circle arrows or anything similar.

Hope this helps someone, as some of the other answers would not scale well.

Answer 5

you can use fa-stack with the fa-circle icon under the other to have better control on the pixel just at the border:

<span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x icon-a"></i>
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i>
</span>

with:

.icon-a {
    color: #FFF;
    font-size: 0.9em;
}
.icon-b {
    color: #000;
}