How to apply font awesome icon color - including white shades not just the outlines

Question

How do I color the font awesome icon, especially the ones with white shade

For example I added the below css style to font awesome icon "fa fa-files-o", but that doesn't color the whole icon, only the outlines are showing in green.How can I ensure the whole icon has the colour?

.file-icon-green{
  color: #36931a;
  background-color: #3e935f;
}

<i class='fa fa-files-o file-icon-green'></i>

@H.Mikhaeljan have already seen the link that you have posed here. My example is also similar to the one there but that doesnt work, hence this post. — serah, Mar 14 '18 at 15:15

score 0 · Answer 1 · answered Mar 14 '18 at 15:17

FontAwesome works like a normal font does.

For example: if you tried to style a "O", only the circular part of it is coloured, and the "hole" remains whatever the background colour is.

I don't think there is a method for achieving what you want with FontAwesome, you would need to utilise a graphic instead.

How to apply font awesome icon color - including white shades not just the outlines

1 Answers1