18

What am I doing wrong?

body {
  font-family: arial;
  font-size: 1.5rem;
}

li.facebook:before {
  content: "\f09a";
  font-family: FontAwesome;
}

li {
  list-style: none;
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
<ul>
  <li class="facebook">123 Drive.</li>
  <li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Labanino
  • 3,902
  • 9
  • 33
  • 51

4 Answers4

42

UPDATE 3:

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

And maybe you have to set a font-weight see documentation

UPDATE 2: TL;DR

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

For Font Awesome 5 this must be one of the following:

Updated because you use css webfonts:

For method Web Fonts with CSS

Free

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Brands => use this!

font-family: "Font Awesome 5 Brands"

See here: https://jsfiddle.net/nwodoo32/1/

For method SVG with Javascript

Solid

font-family: "Font Awesome 5 Solid"

Regular

font-family: "Font Awesome 5 Regular"

Brands

font-family: "Font Awesome 5 Brands"

Light (Pro)

font-family: "Font Awesome 5 Light"
mfgmicha
  • 3,784
  • 1
  • 25
  • 26
  • it works fine anywhere else but in codepen.io, be aware. – Labanino Mar 28 '18 at 14:30
  • 40
    "font-family: "Font Awesome 5 Free" did not work until I added "font-weight: 900;" – mimic Apr 02 '18 at 20:05
  • 3
    Something else to consider: some times if you don't assign a `font-weight` it won't show. Try from 100 to 900. – Labanino May 17 '18 at 13:28
  • When all else fails, read the [documentation](https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements) on pseudo elements. Their website lists out a table with font name, weight, etc. for each style. – pistol-pete Oct 28 '20 at 20:37
14

You must change your font family and also you must define font weight.

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}
MERT DOĞAN
  • 2,864
  • 26
  • 28
  • `font-family: "Font Awesome 5 Free";` As he wants the facebook logo which is in the Brands pack your `font-family` is **wrong** - see my answer. And yes he **could** (not must) add `font-weight`, but that was not what he asked – mfgmicha Jan 17 '18 at 15:45
  • 2
    Would've never thought that `font-weight` can be the issue. Thanks! – jeesus Aug 14 '18 at 17:46
4

You also need to enable the Pseudo elements if you want to use the font with :before or :after CSS selectors..

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>
mfgmicha
  • 3,784
  • 1
  • 25
  • 26
Wael Wafik
  • 121
  • 1
  • 3
  • 2
    Worked like a charm, but is important to note this config **must be set before** importing/linking/budling the `fontawesome-free or pro` JS file. – Jimmy Adaro Jun 03 '19 at 14:53
1

Step 1 - Register script for pseudo element on dom ready 

window.FontAwesomeConfig = {
    searchPseudoElements: true
}

Step 2 - Use font-awesome 5 font family like below (Use font-weight above 600 for free)

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    content: "\f105";
}
Awadhesh Singh
  • 59
  • 8