Fontawesome 5 font-family not working

Question

I included fontawesome5 in the project with bootstrap 4. When I find the font through 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 changing the font name but it does not work

font-family: 'Font Awesome 5 Free'

Answer 1

Your Unicodewrongf107

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>

Run codeHide result

Or in another case, it font-weight: 900;will save you. Some icons in awesome 5 font do not work without font-weight: 900;,

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

Answer 2

It is strange that you have to put " font-weight: 900 " on some icons so that they display 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 */
}

Answer 3

font-weight.
Font Awesome 5 {font-weight:900}

Answer 4

fontawesome-all.css: "Brands" "Font Awesome 5 Free" "Font Awesome 5 Brands" , .

- CDN: https://use.fontawesome.com/releases/v5.0.6/css/all.css

CDN.

 @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"); }

Hide result

Answer 5

900 - , , FontAwesome ( , ), "" "" , "Pro".

Answer 6

FontAwesome 5 "searchPseudoElements", FontAwesome :

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

: awesome 5 API Awesome: https://fontawesome.com/how-to-use/font-awesome-api

, CSS-

font-family: "Font Awesome 5 Regular";

Answer 7

'all', fontawesome-all.min.css ' fontawesome-all.min.css ' ( ) 'family' @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

, , content: "\f0c8"; , ( ) font-family: Font Awesome\ 5 Free; .

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}

Answer 8

Npm --save @Fortawesome/Fontawesome

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";

!

Answer 9

Font Awesome 5, . :(

- !

font-family: "Font Awesome 5 Pro"; CSS , font-family: "Font Awesome 5 Free OR Solids OR Brands";

Answer 10

- :

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}

Answer 11

, , . :

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

, .

:

.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;
}

, .

Answer 12

<head><script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script></head>

, https://fontawesome.com/get-started

http://fontawesome.io/

Answer 13

.

• fontawesome-all.css

• @font-face

  font-family: 'Font Awesome 5 Free';

font-family: 'Font Awesome 5 FreeR';

:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }

Answer 14

SVG JavaScript, , .

<script data-search-pseudo-elements... >

.

Answer 15

, , ...;)

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>

Answer 16

searchPseudoElements true, Angular5.

import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';