Blog

A gotcha I found with Font Awesome's CDN


Something I was running into when I was programming something involving dynamic classes in the DOM using AngularJS's ngClass... The Font Awesome icon wasn't loading.

It was quite strange, as if I had the class declared on page load, it would show the icon.

As I delved deeper into this, and looked at the active page source in Chrome's developer tools, I noticed that instead of the DOM element with a class name, I was seeing SVG.

Well, guess what: In my efforts to asynchronize a few things, I had used the SVG & JS method of using their deferred script tag:

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

As you can see, this was not the best decision for my use-case.

Gotta use the Web Fonts/CSS method:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Note that 5.2.0 was their current version. Your mileage may vary.

So yeah, if you're going to do dynamic class adding or deletion to anything in your web project, and you want to use their CDN, best use the CSS version. Otherwise, you could wind up spending upwards of three hours wondering why the icon's not showing up and thinking AngularJS isn't rendering the class change or something.

(It was late and I was tired. Shuddup).

Links

Archive