Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change font-weight of FontAwesome icons?

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.

like image 379
Richard Avatar asked Jul 24 '13 14:07

Richard


People also ask

How do I make font awesome icons thicker?

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes.

How do I make font awesome icons bold?

To increase fa-bold font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-bold.

Can I modify font awesome icons?

Select the SVG of font-awesome located in your extracted zip inside fonts. Repeat the procces uploading your own svg files. Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.

How do I increase the icon thickness in CSS?

To increase the size of icons relative to its container, use icon-large , icon-2x , icon-3x , or icon-4x . Increase the icon size by using the icon-large (33% increase), icon-2x , icon-3x , or icon-4x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.


2 Answers

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

like image 189
user3303554 Avatar answered Oct 30 '22 11:10

user3303554


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:

fa-times 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.

like image 41
James Donnelly Avatar answered Oct 30 '22 12:10

James Donnelly