Change font-weight of FontAwesome icons?

Question

I would like to make one of the FontAwesome icons a little less heavy - it is much heavier than the font I use. It looks like this:

:

Ugly, right? So I tried to lose the font weight as follows:

.tag .icon-remove { font-weight: 100; } 

The attribute seems to be set correctly in CSS, but it has no effect - the icon looks as heavy as before. I also tried font-weight: lighter and -webkit-text-stroke-width: 1px without effect.

Is there a way to make the badge less heavy? The docs say, " Everything you can do with CSS font styles, you can do with Font Awesome, " but I can't figure out how to do it,

Answer 1

Font Awesome uses the private area of ​​Unicode . For example, this .icon-remove that you use is added when using the ::before pseudo selector, setting its contents to \ f00d (  ):

 .icon-remove:before { content: "\f00d"; } 

The Awesome font comes with only one font option, however browsers will display this because they will display any font with only one font option. If you look closely, the normal font size is not as bold as the bold font-weight font. Unfortunately, normal font weight is not what you need.

However, you can change your color to something less dark and reduce its font size so that it stands out a little less. From your image, the text of the "tags" looks much lighter than the icon, so I would suggest using something like:

 .tag .icon-remove { color:#888; font-size:14px; } 

Here's a JSFiddle example and here is another proof that it is definitely a font.

Answer 2

Webkit browsers support the ability to add a stroke to fonts. This piece of style makes the fonts thinner (on a white background):

 -webkit-text-stroke: 2px white; 

An example for codepen is here: http://codepen.io/mackdoyle/pen/yrgEH Some people use SVG for a cross-platform hit solution: http://codepen.io/CrocoDillon/pen/dGIsK

Answer 3

Just to help someone come to this page. This is an alternative if you are flexible in using a different icon library.

James is right that you cannot change the font size, however, if you are looking for a more modern look for the icons, you might think about ionicons

It has ios and android versions for icons.

Answer 4

The author seems to have applied the freemium approach to the font library and provides Black Tie to give different weights in the Font-Awesome library.

Answer 5

Another solution that I used to create lighter font icons similar to the webkit-text-stroke approach, but more portable, is to set the icon color to be the same as the background (or transparent), and use a 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 does not work in ie <10, but at least it is not limited to web browsers.