Font awesome 5 on pseudo elements

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;
    /* ... */
}

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

I think its working fine just like this:

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

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

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!

Font awesome 5 on pseudo elements

Related

Recent Posts