Font Awesome 5 font-family issue

Question

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 tried to change the font name but it does not work

font-family: 'Font Awesome 5 Free' 

Answer 1

Your Unicode is wrong f107

a::after {    content: "\f007";    font-family: 'Font Awesome\ 5 Free';  }

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">  <a>User</a>  <i class="fas fa-shopping-basket"></i>

Or in other case, font-weight: 900; will save you. Some icons in font awesome 5 not working without font-weight: 900;.

a::after {   content: "\f007";   font-family: 'Font Awesome\ 5 Free';   font-weight: 900; } 

Answer 2

Strangely you must put the 'font-weight: 900' in some icons so that it shows them.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {   content: '\f107';   font-family: 'Font Awesome\ 5 Free';    font-weight: 900; /* Fix version 5.0.9 */ }