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.
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes.
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With