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
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"); }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.
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.
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";
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';
The problem is in the font-weight.
For Font Awesome 5 you have to use {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 */
}
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";
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 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 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");}
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.
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!
Source: Stackoverflow.com