Search code examples
cssfont-awesomefont-awesome-5

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?

Solution

  • 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>