How to add fontawesome fonts in css pseudo elements

Question

I'm trying to add FontAwesome icons to css pseudo elements

If I add the icon using html in the regular way it does work, but I'm trying to add the fonts to a bootstrap accordion so the icon changes in the collapsed state. That part works, but the icon is not showing. Instead there is a empty square in chrome and a square with the hex code in firefox.

Added kit (tried before and after css is loaded):

<script src="https://kit.fontawesome.com/30fc0982d8.js"></script>

CSS code:

#faq a:after{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f107';

}

#faq a.collapsed:after{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
}

I would expect the icon to just show, but it doesn't. Any thoughts?

Edit: Forgot to add, I did some extensive searching on this and found several posts. Typically the solution was to add font-weight: 900, but as you can see I already did that.
Edit2: This question was marked duplicate but for FontAwesome with JS+SVG. I'm using the webfonts option.

PLease refer this URL: https://jsfiddle.net/jignashagpatel/4yzu16m2/8/ — jignasha, Aug 26 '19 at 08:38

KuldipKoradia · Answer 1 · 2019-08-26T09:25:47.787

0

as per the comment u need font awesome 5 this is the new code.

<style>
#faq a:after{
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f078";

}
#faq a.collapsed:after{
  content: "\f077";
}
</style>
<section id="faq">
  <a></a>
  <a class="collapsed"></a>
</section>
<script src="https://kit.fontawesome.com/30fc0982d8.js""></script>

edited Aug 26 '19 at 09:25

answered Aug 26 '19 at 07:38

KuldipKoradia

3,005
7
20

OP wants to use Font Awesome 5, not 4.7. – Andrzej Ziółek Aug 26 '19 at 08:09
I just edit this code as per your Comment Just try it once. It works... – KuldipKoradia Aug 26 '19 at 09:28
@KuldipKoradia, you are correct with your solution, but not the reason. Someone else posted the link to a bug, it was by mistake added tot the pro sextion. Thanks anyway. – GetShifting Aug 26 '19 at 11:33

Soothran · Answer 2 · 2019-08-26T08:46:30.783

0

change the font-family name as below

   font-family: 'Font Awesome 5 Pro';

#faq a:after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f107';
}

#faq a.collapsed:after {
  content: '\f106';
}

<script src="https://kit.fontawesome.com/30fc0982d8.js"></script>

<div id="faq">
  <a class=""> link</a>
  <br>

  <a class="collapsed"> collapsed link</a>

</div>

edited Aug 26 '19 at 08:46

answered Aug 26 '19 at 07:44

Soothran

1,233
4
14

What suprises me is that f107 is available in free's [cheatsheet](https://fontawesome.com/cheatsheet). – Andrzej Ziółek Aug 26 '19 at 08:10
@AndrzejZiółek I've edited my answer and please refer to this issue https://github.com/FortAwesome/Font-Awesome/issues/15137 – Soothran Aug 26 '19 at 08:53
@Soothran, you're correct. This is a bug and changing the free to pro fixed it. – GetShifting Aug 26 '19 at 11:31

How to add fontawesome fonts in css pseudo elements

2 Answers2