Font Awesome 5 font-family issue

Question

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

User · Answer

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

User · Answer

I found a solution    Integrate fontawesome-all css At 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

User · Answer

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    x000D   x000D    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      x000D   x000D   x000D

User · Answer

that s probably about pricing model        https   fontawesome com how-to-use on-the-web referencing-icons basic-use  Solid    Free           fas    lt i class  fas fa-camera  gt  lt  i gt   Regular  Pro Required   far    lt i class  far fa-camera  gt  lt  i gt   Light    Pro Required   fal    lt i class  fal fa-camera  gt  lt  i gt   Brands   Free           fab    lt i class  fab fa-font-awesome  gt  lt  i gt

User · Answer

Your Unicode is wrong f107   x000D   x000D  a  after   x000D    content    f007   x000D    font-family   Font Awesome  5 Free   x000D    x000D   lt link href  https   use fontawesome com releases v5 0 1 css all css  rel  stylesheet  gt  x000D   lt a gt User lt  a gt  x000D   lt i class  fas fa-shopping-basket  gt  lt  i gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The problem is in the font-weight  For Font Awesome 5 you have to use  font-weight 900

User · Answer

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

User · Answer

Since FontAwesome 5  you have to enable a new  searchPseudoElements  option to use FontAwesome icons this way     lt script gt    window FontAwesomeConfig         searchPseudoElements  true      lt  script gt    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

User · Answer

IF it s still not working for you  I had forgotten to add the fa-ul class onto the parent  UL  element   lt ul class  quot fa-ul quot  gt   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  lt head gt  tags is just   lt link rel  quot stylesheet quot  href  quot https   cdnjs cloudflare com ajax libs font-awesome 5 14 0 css all min css quot  integrity  quot sha512-1PKOgIY59xJ8Co8 NE6FZ LOAZKjy KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog   quot  crossorigin  quot anonymous quot    gt   And I am using this with React and Preact  No need for any special React npm installs or components

User · Answer

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

User · Answer

If you are using SVG with JavaScript you need to enable this because it s disabled by default  Use    lt script data-search-pseudo-elements      gt    inside your script tag

User · Answer

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

[css] Font Awesome 5 font-family issue

Examples related to css

Examples related to fonts

Examples related to font-awesome-5