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!
Best Answer
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:
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:
then in your CSS:
If the background circle offsets the icon, you can use
line-height
to fix it.