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'
This question is related to
css
fonts
font-awesome-5
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";
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.
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; }
The problem is in the font-weight.
For Font Awesome 5 you have to use {font-weight:900}
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>
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 {_x000D_
font-family: 'Font Awesome 5 Brands';_x000D_
font-style: normal;_x000D_
font-weight: normal;_x000D_
src: url("../webfonts/fa-brands-400.eot");_x000D_
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"); }_x000D_
_x000D_
.fab {_x000D_
font-family: 'Font Awesome 5 Brands'; }_x000D_
@font-face {_x000D_
font-family: 'Font Awesome 5 Brands';_x000D_
font-style: normal;_x000D_
font-weight: 400;_x000D_
src: url("../webfonts/fa-regular-400.eot");_x000D_
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"); }IF it's still not working for you, I had forgotten to add the fa-ul class onto the parent (UL) element:
<ul class="fa-ul">
Together with the 2 bits of advice provided already by others:
a) font-family: 'Font Awesome\ 5 Free';
b) font-weight: 900;
solved it for me.
FWIW, the include in my <head> tags is just:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
And I am using this with React and Preact. No need for any special React npm installs or components.
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 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 */
}
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;
}
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 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';
Source: Stackoverflow.com