Search code examples
htmlcssfont-awesomecodepen

Why doesn't a free fontawesome icon show up when using CodePen?

The CodePen is https://codepen.io/ericg_off/pen/wvORewY

The CSS is:

.fa-test {
  font-family: "Font Awesome 6 Free";
}

The HTML is:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="fa-test">
  &#xf007
</div>

<div class="fa-test">
  &#xf3c5
</div>

The CodePen result looks like:

codepen result

FontAwesome does show f3c5 (location-dot) as a free icon...

FontAwesome

location-dot

The other free icon I am using, f007 (user), does work.

Where it gets a bit stranger is that if I use this same code with a Stack Overflow snippet, the location-dot icon will show up.

.fa-test {
  font-family: "Font Awesome 6 Free";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="fa-test">
  &#xf007
</div>

<div class="fa-test">
  &#xf3c5
</div>

What needs to change about how I am using CodePen so the free location-dot icon will show up when using FontAwesome 6.5.1?

Solution

  • Set font-weight to 900 in your css class.