2

I added a Font Awesome 5 character as pseudo :before content to an <li> element. The icon renders correctly in Firefox (v74) but in Chrome (v80) it only looks like an outline square/missing character.

The same icon added as element renders correctly in both browsers.

Here's a fiddle: JS Fiddle

    ul li {
       list-style: none;
    }

    ul li:before {
            margin-right: 10px;
            font-family: 'Font Awesome 5 Pro Solid';
            content: '\f0c8';
            color: "#cc0000";
    }

Is there a workaround to make the icon show in Chrome?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
kiwiana
  • 47
  • 1
  • 7

1 Answers1

1

Your jsfiddle has incorrect font-family specified.
The correct one is Font Awesome 5 Free (for the CDN font link you used).

Also you have to set font-weight: 900 to have bold squares.

ul li {
   list-style: none;
}

ul li:before {
        margin-right: 10px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f0c8';
        color: #c00;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

As a list bullet (li:before) Firefox (v74) shows correct full square icon, Chrome (v80) shows an outlined square like missing character.

<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>

Inserted as 'normal' &lt;i&gt; element, the icon shows in both browsers: <i class="fas fa-square"></i>
Kosh
  • 16,966
  • 2
  • 19
  • 34
  • Ah yes, the CDN is from JSfiddle... but even with the 'Font Awesome 5 Free' it's not showing, however your suggestion to add the class="fas fa-square" to the li works. That's new to me, is it in the FA5 documentation? It does not solve my problem properly though because I want to have all li look like this without adding a class to each element. Only other alternative I can think of, if this is a Chrome bug, is to use a background image instead. – kiwiana Apr 07 '20 at 01:12
  • @kiwiana, finally got it! See the updated answer. – Kosh Apr 07 '20 at 01:32
  • 1
    Oh, I remember the font-weight issue from the beginning of FA5...didn't cross my mind since it's rendering ok in FF. Every font-weight above 600 seems to work for Chrome. Thanks! – kiwiana Apr 07 '20 at 01:52