[css] 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.

This question is related to css twitter-bootstrap font-awesome

The answer is


.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}

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


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.


Another solution I've used to create lighter fontawesome icons, similar to the webkit-text-stroke approach but more portable, is to set the color of the icon to the same as the background (or transparent) and use 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 doesn't work in ie <10, but at least it's not restricted to webkit browsers.


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.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to font-awesome

Search input with an icon Bootstrap 4 Add tooltip to font awesome icon Font awesome is not showing icon Want to make Font Awesome icons clickable Change color when hover a font awesome icon? Is it possible to make Font Awesome icons larger than 'fa-5x'? FontAwesome icons not showing. Why? How to include a Font Awesome icon in React's render() Statically rotate font-awesome icons How to vertically align text with icon font?