How to Give a Font Awesome Icon a Background Color

Font Awesome Background color

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.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>

Font Awesome 5: Possible to change BACKGROUND-COLOR of icon so it doesn't bleed outside border?

I posed this question to the very helpful Font Awesome support and was directed to use their built-in layering and power transforms to create custom icons.

Note: This solution only works if you're using the SVG + JS version of Font Awesome.

 <span class="fa-layers fa-fw fa-5x">
    <i class="fas fa-triangle" style="color: yellow;"></i>
    <i class="far fa-exclamation-triangle" style="color: black;"></i>
 </span

More reading and examples here:

https://codepen.io/fontawesome/pen/wxLQEL

https://fontawesome.com/how-to-use/on-the-web/styling/layering

https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

How do I give a Font Awesome icon a background color?

Use stacked icons instead . Here is a fiddle, you can play with it to make it far more better. Below is full code :

HTML

<ul class="list-inline">
    <li><a href="#">
        <span class="fa-stack fa-lg icon-facebook">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
        </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-twitter">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-gplus">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
        </a></li>
</ul>  

CSS

.fa-stack-1x {
    color:white;
}
.icon-facebook {
   color:#3b5998;
}

.icon-twitter {
    color:#00aced;
}

.icon-gplus{
    color:#dd4b39;
}

body {
    background-color: black;
}

Font awesome background color is overflown

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>

Font Awesome: How to make the background-color out of the shape delimitation transparent?

I ended up using several fa-stack with the inner shape I wanted to use.

<span class="fa-stack fa-lg success">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-check fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg error">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>

Although it defeats the purpose of delimiting the background: http://jsfiddle.net/cLpybq20/

Not exactly the same as the glyphs I was using but it fits my needs and appear less tweak-ish.

Can I change the color of Font Awesome's cog icon?

This worked for me:

.icon-cog {
  color: black;
}

For versions of Font Awesome above 4.7.0, it looks this:

.fa-cog {
  color: black;
}

How do I change the color of the Facebook Font Awesome icon?

The icon only consists of the part around the 'f', the 'f' itself and the part around the edges are transparent. Therefore you have to create a white part only under the 'f'.

It's possible with a combination of a linear-gradient, background-size and background-position. With the gradient you create a white rectangle, that you can scale and position to only lay under the 'f'.

By using a relative unit (%), your white background rectangle scales with the corresponding font size.

body {  font-size: 5em;  background: #000}
.fa-facebook-square {  color: #3b5998;  background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );  background-size: 55%;  background-position: 70% 0;  background-repeat: no-repeat;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><i class="fa fa-facebook-square"></i>

How to add color to transparent area of font awesome icons

universal means no. I'm afraid you'll have to work with each icon individually.

.fa {  background-image: radial-gradient(at center, red 40%, transparent 40%);}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/><div>  <i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i></div>

---

Related Topics