css - 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.

Answer 1

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