How to control font-weight with font-awesome

Question

I want to change the weight of my font-awesome font (I'm using version 5, but not the Pro version), and for some reason I can't do it.

I already tried:

.icon {
    font-size: 1.5rem;
    -webkit-text-stroke: 2px white;
    -webkit-text-stroke-width: 0%
}

Is there any way to get the "light" version of the icons without paying the Pro version?

This:
Change font-weight of FontAwesome icons?
Don't solve the problem.

Thanks.

There is only one weight for the font-awesome fonts so you cannot alter them. The only way would be to use the SVG + JS version or the SVG sprites. See https://fontawesome.com/how-to-use/ — Jake, Mar 28 '19 at 10:13
Possible duplicate of [Change font-weight of FontAwesome icons?](https://stackoverflow.com/questions/17836851/change-font-weight-of-fontawesome-icons) — Sebastian Brosch, Mar 28 '19 at 11:24

score 4 · Accepted Answer · edited Mar 28 '19 at 10:49

4

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

edited Mar 28 '19 at 10:49

Daut

2,537
1
19
32

answered Mar 28 '19 at 10:19

Taj Khan

579
2
7
22

font awesome 5 does not allow it – Taj Khan Mar 28 '19 at 10:32
even if you change it wont have any effect – Taj Khan Mar 28 '19 at 10:32
thats what i am saying it's not allowed and it wont work.. you have look for another font icons which provides that version – Taj Khan Mar 28 '19 at 12:51

score 1 · Answer 2 · answered Sep 16 '20 at 16:34

1

I know this is old but I was looking for this also and realized that you just have to add this after the font awesome css.

 <style>
  .fa, .fas {
    font-weight: 400;
  }
</style>

answered Sep 16 '20 at 16:34

user1170117

69
1
1
13

How to control font-weight with font-awesome

2 Answers2