The "before" pseudo element not working in Font awesome v.5

css font-awesome-5
Labanino picture Labanino · Dec 19, 2017 · Viewed 24k times · Source

What am I doing wrong?

Answer

mfgmicha picture mfgmicha · Dec 28, 2017

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"

Related questions

Font Awesome 5 font-family issue

I integrated Font Awesome 5 in a project with bootstrap 4. When I recall a font via CSS it does not work. with Font Awesome 4 the code was as follows: #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { float: right; content: "\f107"; font-family: "FontAwesome"; } I …

Read More
Font Awesome 5, why is CSS content not showing?

I am trying to use FontAwesome in the content of CSS. It appears with the code for the icon instead of the icon. I have followed the online helps but still not working css @font-face { font-family: 'FontAwesome'; src: url('https://…

Read More
How to change color of icons in Font Awesome 5?

I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work. HTML Code: <div class="container mt200 icons"> <div class="col-md-3"> <div class="bggray2 …

Read More