CODEWITHSUNDEEP
cssfont-awesomefont-awesome-5
Ana Anderson
Ana Anderson

Reputation: 25

Font Awesome 5 icon in stylesheet showing up with unicode

I'm attempting to integrate FontAwesome like so: 

.accordion:after {
 content: "\f0d7";
 color: #9E3E39;
 font-weight: bold;
 float: right;
 font-size: 15px;
 margin-left: 5px;
 margin-top: -80px;
 font-family: FontAwesome;
}

and the end result is this:

enter image description here

\f0d7

This is the script we're using for FA:

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

This is in a invisionfree based forum, using the bbcode [dohtml] to activate html coding.

What am I doing wrong? I feel like in theory it should be all good?

Upvotes: 2

Views: 1864

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42304

While the JavaScript version of FontAwesome supports pseudo-classes, they're not recommended:

enter image description here

As such, you should either use the CSS version:

.accordion:after {
  content: "\f0d7";
  color: #9E3E39;
  font-weight: bold;
  float: right;
  font-size: 15px;
  /*margin-left: 5px;*/
  /*margin-top: -80px;*/
  font-family: FontAwesome;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion">Accordion</div>

Or better yet, make use of the <i> tags (considering it as an svg target for additional styling):

.accordion svg {
  color: #9E3E39;
  font-weight: bold;
  float: right;
  font-size: 15px;
  font-family: FontAwesome;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="accordion">Accordion <i class="fas fa-caret-down"></i></div>

Upvotes: 1

zgood
zgood

Reputation: 12571

I think your font-family might be wrong. Please go here and go to the "CSS Pseudo-elements" section and read the warning.

It looks like you need to set the font-family to font-family: "Font Awesome 5 Solid";

You maybe also need to add this script

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

Upvotes: 1

Related Questions