Font Awesome 5 font-family issue
Solution 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;
}
Solution 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 */
}
Solution 3:
The problem is in the font-weight.
For Font Awesome 5 you have to use {font-weight:900}
Solution 4:
Using the fontawesome-all.css file: Changing the "Brands" font-family from "Font Awesome 5 Free" to "Font Awesome 5 Brands" fixed the issues I was having.
I can't take all of the credit - I fixed my own local issue right before looking at the CDN version: https://use.fontawesome.com/releases/v5.0.6/css/all.css
They've got the issue sorted out on the CDN as well.
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands'; }
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }