How to fontawesome 5 solid and regular icons n pseudo elements

Question

I am trying to embed fontawesome 5 icons in my project. I need to add icons in pseudo elements (:before, :after). I could add regular icons but not solid icons. Both have same unicode value. This is my css so far,

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
}

Now it displays regular star icon. How can I make it solid icon?

Thanks in advance.

I have tried that, but it is not working. The icon won't load. I am using the free version of fontawesome — hakkim, Apr 06 '18 at 06:02
can you please post the js fiddle for us? Also try using font-family:Font Awesome\ 5 Free - For ref : https://fontawesome.com/cheatsheet — Hiral Vadodaria, Apr 06 '18 at 13:20

score 15 · Answer 1 · answered May 09 '18 at 11:18

15

To make it solid icon, add font-weight: 900;

label.star:before {
    content: '\f005';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

answered May 09 '18 at 11:18

Luvias

563
1
7
19

score 0 · Answer 2 · answered Mar 15 '21 at 22:07

0

I know I'm late to the party, but...

If you need to change the icon style from Solid to Regular, just update the font-family:

font-family: 'Font Awesome 5 Free Regular';

answered Mar 15 '21 at 22:07

Ricky

2,912
8
47
74

How to fontawesome 5 solid and regular icons n pseudo elements

2 Answers2