Font-awesome: FontAwesome5 Kit, icons not showing on ::before unless I manually add all.css stylesheet (CSS / Free)

Created on 10 Jun 2019  ·  20Comments  ·  Source: FortAwesome/Font-Awesome

Describe the bug

Using the kit JS and the following Sass, the camera icon does not load, unless I also manually add 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">

to the head of the HTML

Tested in Chrome and Firefox.

p.wp-caption-text::before
        font-family: "Font Awesome 5 Free"
        font-weight: 900
        content: "\f030"

Expected behavior

Icon loading

Screenshots

fontawesomeiconsnotshowing

Version and implementation
Version: v5.9.0
Browser and version: Firefox 67.0.1, Chrome 75.0.3770.80

  • [x] SVG with JS
  • [ ] Web Fonts with CSS
  • [ ] SVG Sprites
  • [ ] On the Desktop

Bug report checklist

  • [x] I have filled out as much of the above information as I can
  • [x] I have included test code because my odds go _way_ up that the team can fix this when I do
  • [x] I have searched for existing issues and to the best of my knowledge this is not a duplicate
bug kits
Source
picture benninkcorien

Most helpful comment

Hi, I can see that your kit is using the CSS framework now.

I can confirm there is an issue.

Basically, the Free CSS version of the Kit is setting the wrong font name of Font Awesome 5 Pro instead of Font Awesome 5 Free

Ref: https://jsfiddle.net/tagliala/xjazof9w/9/
Ref 2: https://kit-free.fontawesome.com/releases/latest/css/free.min.css
Workaround: https://jsfiddle.net/tagliala/xjazof9w/22/

Let's assign @robmadole

picture tagliala on 10 Jun 2019
👍2

All 20 comments

Hi!

Thanks for being part of the Font Awesome Community.

I think that kits support pseudoelements the same way as the standard SVG + JS Framework, so you need to add data-search-pseudo-elements attribute to the script tag

Demo: https://jsfiddle.net/tagliala/xjazof9w/4/

Ref: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js

Does this help?

tagliala picture tagliala on 10 Jun 2019

Yes, that kind of helps, thank you!
That is working great on jsfiddle.
BUT it's still not working on anything I make.

http://corienbennink.nl/fatest.html has your example code with my kit.js , now with the added data-search-pseudo-elements in the script tage. And nothing is showing up.

I need sleep. Will try again tomorrow.
(or just use the CSS and not the kit, since the CSS is working fine.. I spent WAY too much time on trying to get one camera icon to show up ;) )

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FontAwesome Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script data-search-pseudo-elements defer src="https://kit.fontawesome.com/2e75c5cb4f.js"></script>
    <style>
        body {
            font-size: 16px;
        }

        .home::before {
            display: none;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f030";
        }
    </style>
</head>

<body>
    <h1>There should be an icon under this heading</h1>
    <span class="home"></span>
</body>

</html>
benninkcorien picture benninkcorien on 10 Jun 2019

Hi, I can see that your kit is using the CSS framework now.

I can confirm there is an issue.

Basically, the Free CSS version of the Kit is setting the wrong font name of Font Awesome 5 Pro instead of Font Awesome 5 Free

Ref: https://jsfiddle.net/tagliala/xjazof9w/9/
Ref 2: https://kit-free.fontawesome.com/releases/latest/css/free.min.css
Workaround: https://jsfiddle.net/tagliala/xjazof9w/22/

Let's assign @robmadole

tagliala picture tagliala on 10 Jun 2019
👍2

Well, that explains that :)
Changing the font-family to Pro was about the only thing I didn't try.
The workaround works fine too.

(and I found my first bug!)

benninkcorien picture benninkcorien on 11 Jun 2019

We also have this issue in our project. Any news about fix?

BadWork picture BadWork on 16 Sep 2019

@benninkcorien @BadWork I think this has been fixed, could you please confirm?

tagliala picture tagliala on 16 Nov 2019

Confirmed. It seems to be working now. Thanks!

(tested my kit JS with this code https://codepen.io/vikasverma93/pen/raxGaM minus the fontawesome CDN on localhost)

benninkcorien picture benninkcorien on 18 Nov 2019

reopening here

@robmadole this has not been fixed yet.

Reproducible test case: https://jsfiddle.net/tagliala/xjazof9w/28/ (please disable system fonts)

Also, I can clearly see "Pro" in the font-face definition here: https://kit-free.fontawesome.com/releases/v5.12.0/css/free.min.css

tagliala picture tagliala on 27 Dec 2019

ping @robmadole

tagliala picture tagliala on 11 Jan 2020

issue persists in 5.12.1

johndoh picture johndoh on 6 Feb 2020

Can confirm that it still persists in 5.12.1. I have to use Font Awesome 5 Pro on a Free kit

MJTheOne picture MJTheOne on 18 Mar 2020
👍1

Yes, this is still an issue

tagliala picture tagliala on 18 Mar 2020

I'm targeting 5.12.2 for the fix on this.

robmadole picture robmadole on 19 Mar 2020

fixed for me in 5.13.0

johndoh picture johndoh on 24 Mar 2020

@robmadole should this be considered a potential breaking change?

tagliala picture tagliala on 24 Mar 2020

We actually maintained the old font-face of "Font Awesome 5 Pro" to prevent breaking. 🤘

robmadole picture robmadole on 24 Mar 2020

@robmadole oh, I've seen the commits about backward compatibility in the build repo and I've also searched for "Pro" in the 5.13 free kit css file but it didn't appear for some reason 🤦🏻‍♂️

Now I can see it, thanks for the clarification

Closing here

tagliala picture tagliala on 24 Mar 2020

@tagliala I'm glad to have you double-check me!

robmadole picture robmadole on 24 Mar 2020 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiles</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- <script data-search-pseudo-elements defer src="https://kit.fontawesome.com/2e75c5cb4f.js"></script> -->
</head>
<body>
    <span style="font-size: 3em; color: Tomato;">
        <i class="fas fa-camera"></i>
      </span>

      <span style="font-size: 48px; color: Dodgerblue;">
        <i class="fas fa-camera"></i>
      </span>

      <span style="font-size: 3rem;">
        <span style="color: Mediumslateblue;">
        <i class="fas fa-camera"></i>
        </span>
      </span>
    <i class="fab fa-freebsd"></i>
</body>
</html>

My font-awesome doens't seem to be working, when I run the above code, like the icons don't show, just small boxes with 'F030' which I think is unicode? It works fine if I uncomment the script tag just above, closing head tag. I don't understand this behavior at all.
Also, I'm new to the open-source community, don't know how to file issues and stuff. So I apologize if this is the wrong place to be commenting.(any resources I can refer to better understand open-source and filing issues and stuff?)

ajeetshergill picture ajeetshergill on 16 May 2020

hi @ajeetshergill

My font-awesome doens't seem to be working, when I run the above code, like the icons don't show, just small boxes with 'F030' which I think is unicode? It works fine if I uncomment the script tag just above, closing head tag. I don't understand this behavior at all.

Your example is loading Font Awesome 4, which is in EOL and it is not supported, but the HTML is actually using FA5 syntax, fas fa-icon

Relavant lines:

<!-- FA4 loaded -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- FA5 syntax -->
<i class="fab fa-freebsd"></i>

You also have a proper kit, commented in the above code, which loads the latest available version (5.13.0) with the CSS implementation, and it works for me: https://jsfiddle.net/tagliala/6xLpajqy/

Also, I'm new to the open-source community, don't know how to file issues and stuff. So I apologize if this is the wrong place to be commenting.(any resources I can refer to better understand open-source and filing issues and stuff?)

Yes, actually wrong place, and different problem 😅

tagliala picture tagliala on 16 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tinyoverflow picture tinyoverflow  ·  402Comments
QuincyLarson picture QuincyLarson  ·  308Comments
ghost picture ghost  ·  161Comments
Vivalldi picture Vivalldi  ·  200Comments
jrf0110 picture jrf0110  ·  170Comments