Problems with "all.css" and "font-family: 'Font Awesome\ 5 Free'" on Chrome and Firefox

[delitestudio]

On our website cuneotrekking.com we've included:

<link rel='stylesheet' id='fontawesome-css' href='https://use.fontawesome.com/releases/v5.0.1/css/all.css?ver=4.9.1' type='text/css' media='all' />

then we wrote this CSS:

.hike-technical-data .ascent:before {
	font-family: 'Font Awesome\ 5 Free';
	content: '\f30c';
	...
}

On Safari everything is perfect:

On Chrome and Firefox, instead of the icon, a square appear:

If, instead of the icon \f30c, we use another code, for example \f005, it also works on Chrome and Firefox:

Does it seem that the CSS all.css does not include everything? Or should we use another font-family?

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

The new version of Font Awesome also requires font-weight: 900; when you use solid icons in custom css classes.

Fiddle: https://jsfiddle.net/tagliala/tgzouajm/12/

The unicode entrypoint \f005 works without font-weight because it represents a regular icon with a font-weight value of 400.

Fiddle: https://jsfiddle.net/tagliala/tgzouajm/13/

I will also add an entry in the troubleshooting guide

Hope it helps

Closing here

[delitestudio]

Thank you! You solved me a big headache :)

[exp0sure74]

That seems to be inconsistent though or am I missing something? Some icons work without having font-weight 900 while others won't - both from the free solid styles as far as I can see.
Example: https://jsfiddle.net/berjcaLy/21/

[tagliala]

@exp0sure74 all FA5 Free icons must be available for the solid style (font-weight: 900)

A lot of icons are available in both solid and regular styles

Please check on the documentation: https://fontawesome.com/icons?d=gallery

Still wondering why the 'Other Icon Pseudo' is working without being 900 while part of the solid styles.

https://fontawesome.com/icons/caret-square-right?style=regular

f152 is available for free users in both solid and regular styles

https://fontawesome.com/icons/external-link-alt?style=solid

f352 isn't (please notiche the PRO label on the regular icon)

[stesvis]

I am having the same issue of the original post from @delitestudio even after adding font-weight: 900.
Here's a demo:

• sidebar menu (the dropdown arrows show as squares in chrome and hidden in Edge)
• missing menu icons
• the magnifying glass is missing from the search box
• other missing icons too

http://dusano.levitica.ca/Test/test3

ul.nav-main li.nav-parent > a:after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f107';
        color: #abb4be;
        position: absolute;
        right: 0;
        top: 0;
        padding: 14px 25px;
    }

I even added this script I found in the docs:

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

What is still missing?

[tagliala]

@stesvis you are mixing usages

ul.nav-main li.nav-parent > a:after { <-- css usage

window.FontAwesomeConfig = { searchPseudoElements: true }; <-- svg usage

please take another look at the docs

SVG: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
CSS: https://fontawesome.com/how-to-use/web-fonts-with-css#pseudo-elements

[mtrabelsi]

too much confusing on your documentation and missing information, one needs to ask, please include stuff in your doc

[tagliala]

Hi @mtrabelsi

could you please clarify? Where the documentation is confusing? Where the information is missing?

[mtrabelsi]

in your guide for upgrading from 4 to 5 ( https://fontawesome.com/how-to-use/upgrading-from-4#icon-name-changes-complete-list)

there is no mention to font-family needs to be changed as well:

font-family: 'Font Awesome\ 5 Free';

which make it looks like nothing to be changed there

[tagliala]

@mtrabelsi thanks, got it.

Since this lack in documentation in upgrading has already been reported, I will open a new issue in our private repo

[AshalathaP]

Add below css
.Collapsible__trigger:after {
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900;
}

[vladutilie]

Hi,

I am using Shopline theme with FA5 for WordPress and I have tried to put the fas fa-box icon in a page but this doesn't work. I have tried with <span class="fas fa-box"></span> and with <i class="fas fa-box"></i>. The interesting fact is that for example fas fa-upload or another icons (solid) are working.

What is the issue? (I haven't found a solution in the troubleshooter) Thank you!

[tagliala]

@vladutilie sorry but we do not provide support for third party plugins.

If you provide a reproducible test case, I will take a look.

Please note that fa-box has been added in FA Version 5.0.7 https://fontawesome.com/icons/box?style=solid

So please make sure that your theme is using FA >= 5.0.7

[Sebas82]

Hi,

I've followed all the cases you showed but I'm still having some problems with the "\f57d" code. It doesn't appear. Could anyone give me a hand on this?

[manBearCat]

I've fixed display issues by adding this to my css when I am using any of the FA icons that are solid.

.fas {
font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
}

EDIT: Without using both of those declarations in the font-family it broke on chrome. This way so far has worked on all browsers.

This fixed the icons not displaying in FF and EDGE. I've also experienced this when using the brand icons and the all.min.css file you have to specify the font family "Font Awesome 5 Free Brands". Hope this helps someone.

[Sebas82]

Many thanks for your answer manBearCat. I didn't find a solution and just change the code.

Regards.

[huarazdesign]

that line is important "font-weight: 900;"
it works only with bold and 900

[justingolden21]

Note that if you use just one (ie. solid) of the font types, you must include fontawesome.css (or fontawesome.min.css of course):

Add a reference to the core styling file (/css/fontawesome.css) and the CSS for individual styles (e.g. /css/brands.css) into the of each template or page that you want to use Font Awesome on. Pay attention to the pathing of your project and where you moved the files to in the previous step.

Source: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

[nilamsavani]

Hi,
I have to convert HTML to PDF and for that, I am using Rotativa. I have font-awesome icons in my view and they are rendering properly in PDF on the local and testing environment but it appears as the square on the live server. Can anyone help me to resolve this issue?

[manolog2f]

Hi,

I have a problem I try show this ico.

It is my code.

.fa-wpforms:before {
font-family: "Font Awesome 5 Free";
content: "\f298";
font-weight: 900;
}

Thanks.

[tagliala]

Hi @manolog2f, please note that wpforms is a Brand icon, so its proper font-family name is font-family: "Font Awesome 5 Brands";.

Also, the font weight should be set to normal (400)

Please take a look at our documentation: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#how-they-work

[rjb-dev]

thanks @manBearCat, that totally saved me an endless headache!

[rmfranciacastillo]

Hi I'm currently trying to use Font Awesome Brand icons and can't seem to get them working on Chrome. I got the other icons to work except the brands.

What am I missing here? I appreciate any input

Browser:
Chrome Version 74.0.3729.157

Source: https://codepen.io/rmfranciacastillo/pen/YbEgvG?editors=0100

SASS source

&::before
   font-family: "Font Awesome 5 Free Brands", "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important
   content: "\f39e"
   font-weight: 900
   padding-right: 4px

[tagliala]

@rmfranciacastillo

The proper font-weight for Brands is 400 (the default value, so you can omit it).
The proper font name is "Font Awesome 5 Brands" and fallbacks are pretty useless, you can avoid them

Fixed pen: https://codepen.io/tagliala/pen/GaQNbV?editors=0100

Hope it helps

[erfurtjohn]

I came around from Google and this solved my problem... thank you!

[Hainaa]

Hi guys, just upgraded to FA 5 Pro and all went well except Firefox & IE are the only browsers that aren't rendering icons at all.

Any help is appreciated, thanks.

Firefox and IE:

Every other browser:

[tagliala]

Hi @Hainaa

Could you please open a new issue by filling out our bug report template?

Please provide all the information you can. A reproducible test case would be better

[Hainaa]

Hi @Hainaa

Could you please open a new issue by filling out our bug report template?

Please provide all the information you can. A reproducible test case would be better

Found out what was happening, it was an issue with how I was preloading content.

[culajevic]

Hi, I have installed font awesome using npm command npm i -D @fortawesome/fontawesome-free. Then I try to import it in my scss file in 2 ways.

@import '@fortawesome/fontawesome-free/css/all';
or
@import '@fortawesome/fontawesome-free/scss/fontawesome.scss';

after this I'm only getting blank squares instead of my icons. I'm using font awesome in my scss files like

.radioStyle input[type=radio] + label:before { content:"\f111"; font-family: "Font Awesome 5 Free"; color: $button-grey; font-size: 24px; padding-right: 8px; vertical-align:middle; }

also I'm using it in my html comment and I tried also to replace fa with fas or fab

and none of these is working. When I use CDN everything is working as expected.

any advice?

[tagliala]

@culajevic

Since there are several ways of including Font Awesome in a web application via npm, please open a new issue by filling out our bug report template and provide a reproducible test case.

Since you are probably hosting the font files yourself, please check that your style as well ass your webfont are being copied by your build system

I have set up a fast configuration with parcel and I've included the stylesheet from index.js and your use case works: https://codesandbox.io/s/nervous-ardinghelli-vcsxj (well... I suppose that some other styles are missing)

[ParticleDuality]

Hi, I'm developing a simple app in Electron.js and I get blank squares when using this code:

.player .timeline .controllers .back::after {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f04a";
      margin-right: 5px;
}
.player .timeline .controllers .play::after {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
     content: "\f04b";
     margin-left: 5px;
}
.player .timeline .controllers .forward::after {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f04e";
     margin-left: 5px;
}

This is the HTML:

<div class="timeline">
          <div class="soundline"></div>
          <div class="controllers active">
              <div class="back"></div>
              <div class="play"></div>
              <div class="forward"></div>
          </div>
      </div>

I already checked they had the proper font-family and font-weight.

[tagliala]

Hi @Dasapugo4444, please open a new issue by filling out our bug report template

In this case, please provide how you are loading Font Awesome and a reproducible test case would be very appreciated

[galbraithjessie]

use this in HTML to get rid of the box on chrome. I was having the issue and tried

font-family: 'Font Awesome 5 Pro'

Even on the free version if you write font awesome pro then your unicode will work.

[AJVA2580]

Hello @tagliala,

I hope you are doing well,

Quick question - I am running on this issue when I am trying to uses free bran icons. The icon works but doesn't show or can't see it. I tried to look everywhere for an answer but can't any yet.

<footer class="footer">
            <!-- Replace with my email address-->
            <a href="mailto:[email protected]" class="footer__link">[email protected]</a>
            <ul class="social-list">
                <li class="social-list__item">
                    <a class="social-list__link" href="https://codepen.io"><i class="fab fa-codepen"></i></a></li>
                <li class="social-list__item">
                    <a class="social-list__link" href="https://codepen.io">b</a></li>
                <li class="social-list__item"><a class="social-list__link"
                href="https://twitter.io">c</a></li>
                <li class="social-list__item"><a class="social-list__link"
                href="https://github.io"><i class="fab fa-github"></i> </a></li>
            </ul>
        </footer>

I can see the letters but not icons.

Thanking you in advance for your help

[tagliala]

Hi @AJVA2580

Please open a new bug report template and provide a reproducible test case

[olcaydaser]

Hi!

Thanks for being part of the Font Awesome Community.

The new version of Font Awesome also requires font-weight: 900; when you use solid icons in custom css classes.

Fiddle: https://jsfiddle.net/tagliala/tgzouajm/12/

The unicode entrypoint \f005 works without font-weight because it represents a regular icon with a font-weight value of 400.

Fiddle: https://jsfiddle.net/tagliala/tgzouajm/13/

I will also add an entry in the troubleshooting guide

Hope it helps

Closing here

Well, after 4 four days investigation and pulling my hair furiously, at last i have seen your reply. :D Thanks