Change Font-Weight of Fontawesome Icons

Change font-weight of FontAwesome icons?

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.

How to control font-weight with font-awesome

The website states that solid fonts have font-weight of 900 and brands fonts have font-weight of 400 you don't have any control over font-weight.

Font Awesome - getting started

Want to make font-awesome icons thinner

Sorry, it´s not possible to do that using standards (if it is not important in your project you can use the Kiryl Ply suggestion). Font-Awesome comes with just one font-weight variant. There is a new project to solve that problem (not ready yet):

https://www.kickstarter.com/projects/232193852/font-awesome-black-tie

you could look for another library with a bit thinner aspect, try "icon font" in Google.

Font Awesome Light via CSS

Figured it out. You've got to add: font-family: "Font Awesome 5 Pro" and font-weight: 100 (or whatever font-weight you want).

How to make/render a font-awesome font thin?

I do not think it's possible. Because it is a font that uses images. The proportion of the images can not be changed (to be thinner, for example).

The images can be enlarged and narrowed simply because it is scalable.

Changing Width of Font Awesome Icons

Really easy using scale

.fa { transform: scale(1.5,1); }

Font Awesome 5 - Why does Icon disappear when adjusting font-family?

Add the font-family of Font Awesome to the list so it get used for the icon:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

Before<br>

<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" >

Invoice number: </i>

<br>

After<br>

<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >

Invoice number: </i>

Font Awesome 5 Choosing the correct font-family in pseudo-elements

Simply use all of them in the same font-family and the browser will do the job. If it doesn't find it in the first one, it will use the second one. (Multiple fonts in Font-Family property?)

By the way, the correct font-family is Free not Solid because the difference between Solid and Regular is the font-weight and both have the same font-family. There is no Solid and Regular in font-family, only Free and Brands.

You may also notice that almost all the Solid version of the icons are free BUT not all the regular version are free. Some of them are included in the PRO package. If an icon is not showing it's not necessarely a font-family issue.

All the Light and duotone version are PRO ones.

.icon {

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";

}

.icon1:before {

  content: "\f099";

  /* TWITTER ICON */

  font-weight: 400;

}

.icon2:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 900;

}

.icon3:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/

}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>

<div class="icon2 icon"></div>

<br>

<div class="icon3 icon"></div>

---

Related Topics