Change font-weight of FontAwesome icons?

css twitter-bootstrap font-awesome
Richard picture Richard · Jul 24, 2013 · Viewed 119.6k times · Source

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:

heavy remove icon, next to lightweight font:

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

user3303554 picture user3303554 · Apr 30, 2016

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

Related questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Use FontAwesome or Glyphicons with css :before

Is there any way to embed HTML in the css content: element when using a :before pseudo-element? I want to use a Font Awesome (or Glyphicon) in a use case like this: h1:before { content: "X"; padding-right: 10px; padding-left: 10px; …

Read More
Centering FontAwesome icons vertically and horizontally

I'm currently using FontAwesome, and am having a really hard time centering the icons both vertically and horizontally in their container. I have tried doing it via positioning and ran into issues bc the icon sizes were different. I basically …

Read More