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.

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

  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"); }

  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!

Update October 2017

What’s been happening?

Quite a bit, I’ve been getting back into software development with the help of my excellent tutor and a greater reason to finish the project. I’ve also been brainstorming for some future projects and trying to finish some delayed projects.

So what are these ‘Projects’?

So as none of you know, as it seems only robots read this blog at the moment, I’ve got a newer website which uses basic PHP and MySQL to load pages in a really ghetto way. apurnell.com is going to replaced with adampurnell.net, but I’m not going to be using WordPress. Although WP is great and damn near everywhere, I’m not happy with the theme development system and the procedural development style. Introducing, Swiftwater (named after the TF2 map of the same name).

Swiftwater is my own fully custom OOP Content Managment System. I started it back in April, and it’s nearing completion. I’m really happy with it, with is simple yet feature rich design following MVP design pattern. I’ve already got some clients interested in it, so I hope those deals go through. I’ve haven’t got much else to say apart that Halloween is my goal for “finishing” this, although some life issues are getting in the way of that.

Anything Else?

I also have been working on a youtube-dl frontend. Youtube-dl is the most reliable and open source (woo!) video downloader, however it’s a CLI (Command Line Interface) program. I’ve got a basic version which I use for downloading videos from my mashup channel, but I hope to release it under MIT by the end of year.

Finally, I’ve had a few idea for future hardware projects and videos. Work will start after I “finish” Swiftwater. Not saying anything yet but I hope it will be exciting!

Hopefully it won’t be as long between posts next time, I’ve been working on this post for over a month now!

The Lenovo Saga – Part 3 – The End?

After the last blog post, we received a call from John Lewis saying that Lenovo had contact them, and was shipping it BACK. This was on the last day before we could get a refund, meaning I had to wait 5 days extra! But we did the hour drive to our nearest John Lewis, and Success! It works, even though it went to Germany according to the Employee. Oh well, at least I got it back.

Oh wait, I forgot i’m me.

Today, during my journey back from college, my Lenovo Yoga 710 cracked at the corner of the glass screen. This screen is not common like cheaper and legendary (ie. Macbook Pro). The screen costs £200 if you can find it in stock, which is just under a third of what I paid for it. I am student, so money is a once a year kinda thing. Even if we buy the the screen, installing it will be a nightmare. I’m so flipping sick of this! I know its my fault, but still its a extra stress with I thought iI removed, but it has to come back at GCSEs time as well! I don’t know how we will solve this, I don’t want a £650 paperweight.

The Lenovo Saga – Part 2- The Wait of 28 Working Days

This continues from Part 1 – The ‘Great’ Wall of Lenovo

After sending my Lenovo Yoga 710 Laptop to John Lewis, we were told it normally takes about 14 days to complete a repair, and they had up to 28 days to repair. Fine, we said. There is no tracking available on John Lewis’ website, so 14 days later we called them up to check the progress of it. After a bit of fumbling around on their side we found out that laptop hadn’t left the store we sent it into yet because Lenovo’s Magic Van hasn’t arrived. A week later, we called again, asking for the progress. It had now left the store, but Lenovo was closed, so they couldn’t ask them on the progress. Plus, in the conversation, we found out is not just 28 days, but 28 working days! Bringing the Laptop Refund date 3rd April 2017 and almost two months since the laptop broke. I am so tired and stressed out after the deadline keeps getting pushed back. I brought this laptop for education and it has taught me something, not to buy Lenovo products ever again! John Lewis keeps saying ‘We will contact Lenovo for Progress” yet we hear nothing back.


The Lenovo Saga – Part 1 – The ‘Great’ Wall of Lenovo

After my Lenovo Yoga 710’s SSD died after only two months worth of use, I looked to get it repaired under warranty with Lenovo, so I submitted a service request the same day, on February 14. I explained clearly what the issue was, the diagnostics issue I went thought; I didn’t just put “computer aint workin”. I got a automated email saying my ticket was registered that day. Fast forward to the next morning, and I got two more emails (from a different email address for some reason), one saying the exact same as yesterdays email, but with a different ticket number, and other one saying my ticket has “been updated and the repair is underway”. What Lenovo had done was closed my original ticket and opened a new one; bit odd I thought but still, they should reply to the new one, right?

5 Days Later, the ticket was closed in the same way as my original ticket, with not even a WORD said by anybody. The repair was “Completed” without the laptop leaving my desk. I didn’t get a canned response to my issue or a message if I got the wrong department; even Steam Support (which got a F from the better business bureau) responses with some information. I then use their email tool to contact them, and its been two days since I got a email stated “You will receive a response shortly.”  


I just got a email back from Lenovo telling me to ‘Run a test in LSC and send it back in HTML format’. What. First of all I thought is what the hell is LSC, never heard of it. A Google later, its Lenovo Solution Center, a piece of software for Windows to Diagnose issues. Yep, just run a Windows application when I cant get into Windows. Also he wants me to provide more information about ‘Plugging in a HDMI Cable.’ Joy.


I gave up, and went to the retailer, John Lewis who I didn’t go to in the first place as they should be ‘Better’ at repairing their own laptop. A 10 minute call was all it took to get my laptop to be paid for by courier to be taken for repair (we don’t have a John Lewis local). I’ve had so much stress over this laptop and i’m so glad it’s getting repaired.

Shame on you Lenovo, shame on you. I really like your products, my phone is a Motorola G4 and I love it, and the Yoga 710 is great! Trackpad isn’t the best but at least it’s better than your support.

The Death of The Potato Game (aka why you should backup)

Welp, this is annoying. This Potato Quality Picture is of my Lenovo Yoga 710 that I brought myself (with the help from family members) for Christmas. I’ve had it about 2 months, and it’s dead. During my use today it Blue Screen’d, which is mildly annoying, but I suspected windows just being windows. Nope, the 256GB SSD inside is no longer detected the BIOS, Windows Installer says their is a 0MB Drive, and Ubuntu finds nothing. The issue is, this laptop contained the only copy of the game I was working on for a Level 2 Game Development Course, and various other projects for my education. I had just setup a Backup system for my desktop a couple of weeks ago, and was going to get it working for the laptop this weekend. Even so, it’s an SSD, so it wont fail within 2 months of buying it? *sigh* Karma hit me hard,  I said to another individual telling me about the lost data they had I responded “You should do backups”. I have contacted Lenovo to repair it, under warranty  and I have to hope is just a loose connection and nothing has happened to said data.

Happy Valentines Day! The Day of Loosing data to Cupid.

Why won’t VGA die?

Video Graphics Array (or VGA) is obsolete, outdated and inferior to better standards. Why is still in use? In the UK its seems that every monitor (except from those new frangled 4K or ultrawide) supports it, and every other laptop that can fit it has one. The biggest issue about this standard for projectors that schools got 10 years ago and being the ONLY way of input to the monitor i’m typing on right now is that it’s ANALOGUE. This first means to signal quality decreases over distance. I’ve seen it where schools have the projector 20 metres away from the source, and then the picture looks complete arse.

The most annoying thing is getting converters for it. If you have a DVI Connector on your Laptop, your lying or talking about your Windows 98 machine with a serial port! HDMI to DVI then VGA wont work as HDMI is digital, DVI is both digital and analogue and VGA is only analogue, it just never works. HDMI to VGA adapters do exists, but the ones I’ve tried failed to display at the correction resolution or fail really quickly. Getting my new Yoga 710 laptop to connect to any projector (which happens a lot mind you) is a total nightmare!

*sigh* Americas and Europe seemed to move away from this standard faster, although DVI isn’t much better, at least it still is compatible with HDMI directly. Just needed to get this off my chest because I have been having so many issues with VGA cables it’s driving me crazy.

ALSO, Never, Never, Never screw in the little devils at the side, trying to take them out in a cramped desk area is the bloody worst!

As requested by Rico – A Description of TF2

He said my description of TF2 on my coursework is too short.  I said I would post it on here. I thought it would be a little bit longer. Boy I was wrong. Copied in full, no spell/grammar checks.

Team Fortress 2 (known as TF2) is a class based first person shooter. You choose from 9 different and unique classes with their own play styles and weapons. These classes are: The Scout, The Soldier, The Pyro, The Demoman, The Heavy, The Engineer, The Medic, The Sniper and Gabe Newells favourate class, The Spy. The Scout’s role is to flank, armed with a scattergun, a pistol and a bat, the scout can do high amounts of damage while taking minimal amount of damage by utalising his double jump feature, allowing him to doge splash damage from explosives. The soldiers role is to do large amounts of damage with his rocket launcher, shotgun and shovel. The demoman can use his secondary weapon to create traps that he can detonate at any time or he can use his primary weapon, the grenade launcher to do 100 damage if it hits the target directly. The pyro is another flanking class armed with a flamethrow, a shotgun and a fire axe. With his flame thrower you can press Mouse2 to use his “compression blast” to blast enemies and incomming projectiles away. The heavy is a tanking class, designed to do large amounts of damage with his minigun, shotgun and his own two fists. the engineer is a defensive class that can build sentires with his wrench. He can also build dispencers to give health and ammo to team mates and teleporters to get people from capture point A to capture pont B quickly. The medic is a healer class with his medigun, syringe gun and bone saw. the sniper is designed to be in the background, picking off targets with his sniper rifle that does 150 damage with a quickscope headshot, or 450 damage if you stay scoped in long enough. The spy is a stealth class that can go invisible and disguise as enemy gamers. He can also use his Electro Sapper to sap engineer buildings.

There are many gamemodes in TF2 ranging from payload, where the BLU team pushes a bomb into the RED teams base. King of The Hill (KOTH) Where BLU and RED fight over a single control point they have to control for a total of 3 minutes before they win the round and even a co-op game mode called “Mann VS Machine” where a team of 6 players on the RED team fight against waves of robots collecting their money and buying upgrades

TF2 isn’t just about using the same class with the same weapons. There are many weapon and cosmetic unlocks for each class that change the way the class is played. There is a weapon called “The Rocket Jumper” that does no damage at all to you or enemies and is commonly used with “The Market Gardener” a melee for the soldier that, when he is in the air from blast jumping, allows him to deal a critical hit to his enemies