Change font-weight of FontAwesome icons

Question

I d like to make one of the FontAwesome icons a bit less heavy - it s much heavier than the font I am using  This how it looks presently       Ugly  right  So I ve tried resetting the font-weight as follows     tag  icon-remove       font-weight  100      The attribute appears to be set correctly in the CSS  but it has no effect - the icon looks just as heavy as before  I ve also tried font-weight  lighter and -webkit-text-stroke-width  1px with no effect    Is there any way I can make the icon less heavy  The docs say  Anything you can do with CSS font styles  you can do with Font Awesome  but I can t figure out how to do this

User · Answer

Webkit browsers support the ability to add "stroke" to fonts. This bit of style makes fonts look thinner (assuming a white background):

-webkit-text-stroke: 2px white;

Example on codepen here: http://codepen.io/mackdoyle/pen/yrgEH Some people are using SVG for a cross-platform "stroke" solution: http://codepen.io/CrocoDillon/pen/dGIsK

User · Answer

Just to help anyone coming to this page  This is an alternate if you are flexible with using some other icon library   James is correct that you cannot change the font weight however if you are looking for more modern look for icons then you might consider ionicons  It has both ios and android versions for icons

User · Answer

2018 Update  Font Awesome 5 now features light  regular and solid variants  The icon featured in this question has the following style under the different variants     A modern answer to this question would be that different variants of the icon can be used to make the icon appear bolder or lighter  The only downside is that if you re already using solid you will have to fall back to the original answers here to make those bolder  and likewise if you re using light you d have to do the same to make those lighter   Font Awesome s How To Use documentation walks through how to use these variants     Original Answer  Font Awesome makes use of the Private Use region of Unicode  For example  this  icon-remove you re using is added in using the   before pseudo-selector  setting its content to  f00d   amp  xF00D      icon-remove before       content    f00d       Font Awesome does only come with one font-weight variant  however browsers will render this as they would render any font with only one variant  If you look closely  the normal font-weight isn t as bold as the bold font-weight  Unfortunately a normal font weight isn t what you re after   What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less  From your image  the  tags  text appears much lighter than the icon  so I d suggest using something like    tag  icon-remove       color  888      font-size 14px      Here s a JSFiddle example  and here is further proof that this is definitely a font

User · Answer

Another solution I ve used to create lighter fontawesome icons  similar to the webkit-text-stroke approach but more portable  is to set the color of the icon to the same as the background  or transparent  and use text-shadow to create an outline    fa-outline-dark-gray       color   fff      text-shadow  -1px -1px 0  999              1px -1px 0  999             -1px 1px 0  999              1px 1px 0  999      It doesn t work in ie  lt 10  but at least it s not restricted to webkit browsers

User · Answer

star-light  after       content    f005       font-family   FontAwesome       font-size  3 2rem      color   fff      font-weight  900      background-color  red

User · Answer

The author appears to have taken a freemium approach to the font library and provides Black Tie to give different weights to the Font-Awesome library

[css] Change font-weight of FontAwesome icons?

Examples related to css

Examples related to twitter-bootstrap

Examples related to font-awesome