Menu
I am using a font awesome "x" icon - but it has a white background - can font-awesome backgrounds be transparent?
The reason is, I want to display it over an image. What option do I need to do this?
Current Code is:
<i class="fa fa-times fa- m-n"></i>
521
Start by opening the icon in the Icon Editor by clicking on the Edit icon button. Select the element that you want to make transparent. Then, click the colour picker and click on the little box with a red cross. Click OK.
You are correct, ico files can be transparent, but when you use Irfanview to convert your transparent gif to an ico file, it will give it a background. So, you need to use an icon editor to go remove those background bits.
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 is a simple quick way to use icons from Font Awesome as a “background-image” using CSS. You need to get the code of the symbol of Font Awesome. The easiest way is to use your browser inspector on the the icon you want to use and copy the code, in my example it's the little star icon using the code “\f005”.
Yes, font awesome uses the ::before psuedo for its icons, so simply do, e.g.:
i::before{
background:transparent;
}
That said, you will likely want to use more specificity than simply i, e.g.:
i[class*=fa-times]::before{
background:transparent;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
