Using Font-Awesome with Pseudo Elements

Sometimes, you will inject Font Awesome icons into a document using pseudo elements rather than the empty <i> tags that are commonly used.

Here’s example code using Facebook and Twitter.

Note the font family: Font Awesome 5 Brands

.menu-social a::before{
  font-family: "Font Awesome 5 Brands";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
 
.menu-social a.facebook::before {
  content: "\f082";
}
 
.menu-social a.twitter::before {
  content: "\f081";
}
 

For the content value, put a backslash followed by the unicode value. You can find the unicode value in the same place you would find the <i> tag to copy on the Font Awesome website.

A couple of poorly documented variations are required if you are using other types of Font Awesome icons.

Symbol Type	Font Family	Font Weight
Brands	Font Awesome 5 Brands	400
Solids	Font Awesome 5 Solid	900
Light	Font Awesome 5 Light	300