I integrated fontawesome 5 in a project with bootstrap 4. When I recall a font via css it does not work.
with fontawesome 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'
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;
}
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 */
}
The problem is in the font-weight.
For Font Awesome 5 you have to use {font-weight:900}
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"); }Requiring 900 weight is not a weirdness but a intentional restriction added by FontAwesome (since they share the same unicode but just different font-weight) so that you are not hacking your way into using the 'solid' and 'light' icons, most of which are available only in the paid 'Pro' version.
Since FontAwesome 5, you have to enable a new "searchPseudoElements" option to use FontAwesome icons this way:
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
See also this question: Font awesome 5 on pseudo elements and the new Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api
Additionaly, change font-family in your CSS code to
font-family: "Font Awesome 5 Regular";
I didn't want to use the 'all' version, so searched the 'fontawesome-all.min.css' file (previously included in the header) for 'family' tag and found at the end a declaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;
So, in the stylesheet for an element where I wanted to use the content: "\f0c8"; code, I've added (or changed to) font-family: Font Awesome\ 5 Free; and it worked.
.frb input[type="checkbox"] ~ label:before {
font-family: Font Awesome\ 5 Free;
content: "\f0c8";
font-weight: 900;
position: absolute;
}
I had tried all above the solutions for Font Awesome 5 but it wasn't working for me. :(
Finally, I got a solution!
Just use font-family: "Font Awesome 5 Pro"; in your CSS instead of using font-family: "Font Awesome 5 Free OR Solids OR Brands";
npm i --save @fortawesome/fontawesome-free
My Sccs:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
It worked fine for me!
the solution is call it like normal font:
@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
Strangely you have to include the font-family and the font-weight for it to work. Here is what worked for me:
.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
From there, you can begin adding any styles that you want.
Let's say:
.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 100px;
color: white;
z-index: 1;
position: absolute;
}
I hope this helps.
I found a solution.
fontawesome-all.cssAt the end of file Search the second @font-face and replace
font-family: 'Font Awesome 5 Free';
With
font-family: 'Font Awesome 5 FreeR';
And replace:
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
With
.far {
font-family: 'Font Awesome 5 FreeR';
font-weight: 400; }
If you are using SVG with JavaScript you need to enable this because it's disabled by default. Use
<script data-search-pseudo-elements ... >
inside your script tag.
that's probably about pricing model... ;)
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Solid Free fas <i class="fas fa-camera"></i>
Regular Pro Required far <i class="far fa-camera"></i>
Light Pro Required fal <i class="fal fa-camera"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>
I had to set searchPseudoElements to to true to get it working in Angular5.
import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';
