Unable to reference Font Awesome 5 icons with CSS

For the final post of 2017, I’d though I would share my experience of upgrading my new website from Font Awesome 4 to Font Awesome 5 and hopefully this will help you if you have a similar issue.

tl;dr If your using Font Awesome with Unicode it’s better to create your own font-face with the font as solid fonts currently cannot be referenced for some reason.

I’ve have created these custom Check boxes for a upcoming project to replace the default OS ones. I used the the CSS Property “content” to insert font awesome icons through their Unicode representation as listed here. Here is the CSS I was using.

 .swft-checkbox{
 -webkit-appearance: none;
 border: 1px solid #ccc;
 min-width: 20px;
 min-height: 20px;
 max-height: 20px;
 max-width: 20px;
 background-color: #fcfcfc;
 cursor: pointer;
}
.swft-checkbox:checked{
 background-color: #398CD4;
}

.swft-checkbox:checked:before{
  font-family: fontawesome;
  content: "\f00c";
  font-size: 12px;
  margin: 3px;
  color: white;
  vertical-align: 14%;
}

However, once I upgraded to Font Awesome 5 the missing character symbol (or whatever it’s called, i can’t be bothered to checked) showed it’s ugly face.  I looked the CSS provided to the classes when inserting in a more common way (Italic tags) I found the Font name has changed to ‘Font Awesome 5 Free’. One quick change later, nothing had changed. After about a hour of trial and error I figured out the problem.

Font Awesome 5 uses 3 different font files to provide the Icons: Regular, Solid and Brands. Brands is separated into it’s own font-family, so it should just work with changing the font to ‘Font Awesome 5 Brands’ and double-checking the latest codepoints listed on each icons page here.

When it comes to other icons they both share the name ‘Font Awesome 5 Free’ which may be the cause of the issue. I was able to reference icons in the regular character set but not the solid set, which so happens to be where the check icon is located.

The workaround is to directly reference the font you require using font-face and using that font instead. Of course you will need to adjust the URLs to point to all the fonts but hopefully with a few adjustments to size and positioning you should have upgraded!

@font-face {
  font-family: 'fontaws';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.swft-checkbox:checked:before{
  font-family: 'fontaws';
  content: "\f00c";
  font-size: 12px;
  margin: 3px;
  color: white;
  vertical-align: 15.5%; /* Changed to make the icon centered within the box */
}

Here is the finished checkbox for your reference. I really like the upgrades between the versions, the only icon I prefer from 4 is ironically the checkbox.

Happy New Year Everybody!

Leave a Reply

Your email address will not be published. Required fields are marked *