Font awesome 5 on pseudo elements

Question

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.

Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements

I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS

score 167 · Answer 1 · edited Jul 01 '19 at 21:44

167

Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).

font-weight has to be:

400 for Regular and Brands symbols
900 for Solid symbols
300 for Light symbols

I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:

@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

.class:before {
    /* >> Symbol you want to use: */
    content: "\f16c";
    /* >> Name of the FA free font (mandatory), e.g.:
               - 'Font Awesome 5 Free' for Regular and Solid symbols;
               - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
               - 'Font Awesome 5 Brand' for Brands symbols. */
    font-family: 'Font Awesome 5 Free';
    /* >> Weight of the font (mandatory):
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols;
               - 300 for Light symbols. */
    font-weight: 900;

    /* >> Optional styling: */
    display: inline-block;
    /* ... */
}

edited Jul 01 '19 at 21:44

Paul

12,296
4
46
56

answered Dec 12 '17 at 14:47

benjaminplanche

13,643
5
54
66

22

wow, that should have been part of the official documentation... you saved my day, thx – JonSnow Feb 05 '18 at 10:52
3

Same here. If you're upgrading from an old version of FA, you **need to set the font-weight in all classes containing "content" – Catinodeh Feb 18 '18 at 01:56
Why isn't this more prominent in the official documentation? I wasted an entire day trying to figure this out! :| – ptrcao Feb 20 '18 at 14:07
What does `font-weight` do? I am only using the solid icons and `font-weight` seems to have no effect. I can omit it, or set its value to 400 or 900, I always see the icon as expected. – gillesB Jun 27 '18 at 07:57
This was very helpful. Thanks. – Fathima Linsa K Aug 10 '18 at 07:26
Why all the documentations has to be a piece of trash and not including such important infos?!! – Alex Jolig Oct 22 '18 at 05:03
1

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements it is stated. But most I think will see the font weight specified and ignore it, thinking it's not important (aka, I did). – Pete_1 Nov 19 '18 at 16:01
here is a cookie @Aldream – Mbithy Mbithy Jan 22 '19 at 22:04
super helpful! this should be on their page! thanks a lot! – AlphaX Aug 30 '20 at 16:50

score 51 · Accepted Answer · answered Dec 08 '17 at 23:40

51

You need to enable it (it's disabled by default).

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Css:

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

Other types: Font Awesome 5 + Solid or Regular or Light or Brands

answered Dec 08 '17 at 23:40

fiasko

625
6
5

1

Cheers I saw that searchPseudoElements in the API but it didn't give an example for the font family/content on the site – Leigh Dec 11 '17 at 10:32
I believe this is only if you are using the JS+SVG version of FA. If you are just using CSS, then @Mohammed's answer is what you need. – Paul LeBeau May 25 '18 at 17:31
2

Be careful with this, it can absolutely annihilate performance when using Edge / IE - see https://github.com/FortAwesome/Font-Awesome/issues/12994 – Gruffy Jun 29 '18 at 11:27

score 20 · Answer 3 · answered Feb 22 '18 at 15:56

20

I think its working fine just like this:

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

answered Feb 22 '18 at 15:56

Mohammed

390
3
7

1

font-weight: 900; is only needed for "solid" icons it think. – Tobias Jun 04 '18 at 19:33

score 11 · Answer 4 · answered Feb 15 '18 at 20:30

11

I got 5 to work using

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

in <head> and

:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f167";
}

in my css

answered Feb 15 '18 at 20:30

Ward

3,302
3
28
50

score 6 · Answer 5 · answered Apr 23 '20 at 11:04

Font Awesome 5, all top answers not working in my case as I am using the free version. The correct answer for this is in this question. check your font type (free or pro) then follow:

Free

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Brands

font-family: "Font Awesome 5 Brands"

Don't forget that I just used the link tag with path to my CSS file in HTML. No enabling required also didn't import the all.css file to my css file. Now it is working!

score 2 · Answer 6 · answered Nov 08 '18 at 15:44

2

Use this Link ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css

CSS

ul li{
    list-style-type: none;
    position: relative;
}

ul li:before{
  position: absolute;
  color:#ff0000;
  top:0;
  left:-30px;
  font-family: 'Font Awesome 5 Free';
  font-size:1.2em;
  content: "\f105";
  font-weight: 900; /* <-- add this or 400 for other styles */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

answered Nov 08 '18 at 15:44

Coyote Red

33
4

font-weight matters, but I'm not gonna squint through that minified css sheet. They should really include the font-weight for the icons. Their icon pages include the html and unicode but no info on font-weights https://fontawesome.com/icons/check?style=solid – Edward Aug 20 '20 at 13:29
However they have a table here https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements. I experimented with font-weights for the check solid and I could go down to 600. – Edward Aug 20 '20 at 13:30

score 2 · Answer 7 · answered Dec 12 '18 at 11:42

2

My problem disappear when i set this value: font-weight: 900;

answered Dec 12 '18 at 11:42

Mantas Dainys

61
3

score 1 · Answer 8 · answered Oct 09 '18 at 07:38

1

Should you be using Fort Awesome to serve your icons then you need to add font-family: <my-kit-name>, no need to use font-weight: 400/900.

For more info see this link:

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

answered Oct 09 '18 at 07:38

Chrillewoodz

25,080
21
84
163

Font awesome 5 on pseudo elements

8 Answers8

Linked