Font Awesome 5 font-family issue
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 */
}
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;
}