Font Awesome icon not showing up for some reason

Question

I am trying to use font Awesome icon as Pseudo-Element with content property so that importing their whole library is not needed.

The output shows up a squared box instead of the actual icon . I think i am missing something here

<div>
<span class="icon"></span>Text After icon
</div>

.icon::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
  font-size: 30px;
}

I think it needs to be font-family:”Font Awesome \5 Free”. https://stackoverflow.com/questions/47788847/fontawesome-5-font-family-not-work — Pavel Hasala, Sep 30 '19 at 06:10
@PavelHasala well i changed the font-family as you told still its not working - https://jsbin.com/sinufuciru/edit?output — Badal Singh, Sep 30 '19 at 06:14

Mohammadreza Yektamaram · Accepted Answer · 2019-09-30T06:33:21.190

0

I've fixed your code by adding font awesome, please try this:

<div>
<span class="icon"></span>Text After icon
</div>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">

edited Sep 30 '19 at 06:33

answered Sep 30 '19 at 06:17

Mohammadreza Yektamaram

1,392
16
36

But as far i know , linking their Stylesheet and then using pseudo + content don't go together. We either use one of them , don't we ? – Badal Singh Sep 30 '19 at 06:18
Dear Badal, You must use both concurrent. – Mohammadreza Yektamaram Sep 30 '19 at 06:21
well i tried your code. Still icon not showing up - https://jsbin.com/hakufaqajo/edit?output – Badal Singh Sep 30 '19 at 06:30
1

I've edited my code ( Changed url ), please try again. @BadalSingh – Mohammadreza Yektamaram Sep 30 '19 at 06:33

Font Awesome icon not showing up for some reason

1 Answers1