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-up/ but not have the "up arrow" within the black circle be transparent but solid color (white)?

Thanks!

Answer 1

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>

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 2

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; }