'FontAwesome icon not showing at all on chromium-based browsers

I'm trying to update some theme from fontawesome 4 to 5. So far everything seems to work fine, the icons in i tags are displayed. Except for one specific icon that displays as a css pseudo-element.

I followed what the FA docs said but the icon still doesn't appear. Not even as a square, just as a plain nothing.

Here's the codes used. It's supposed to display an icon in the middle of the hr :

html head:

<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">

html body:

<hr class="star-light">

css:

hr.star-light:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-size: 2em;
    font-style: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

I also tried to put the conflict detection script and it actually found one... But it doesn't make sense since there's only one conflict: the fa's css itself all.min.css... And i'm not even sure it's linked to the problem... It's been 2 hours i'm stuck there and my searches didn't give me anything relevant. Anyone have an idea of what's going on? Or things i can try?

Here's the whole repository, in case you want to try. it's a hugo theme. My repo already includes fontawesome 5: https://github.com/maxlefou/hugo-freelancer-theme

EDIT: I just found the issue. It's just silly: the problem only occurs on chrome and chromium browsers. Everything works on Firefox. Go figures...

Thanks for your help.

cssfont-awesomepseudo-element


Solution 1:[1]

Try changing the font-family: "Font Awesome 5 Free"; to font-family: "FontAwesome";

This will solve the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rajeev

Related Questions