Change font-weight of FontAwesome icons?
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.
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 (
):
.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.
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
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.