Search code examples
cssfontsfont-awesome-5

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

font-family: 'Font Awesome 5 Free'
Solution

  • 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;
}