Font Awesome is a little different…but still awesome!

Last week at work I jumped on to Font Awesome to grab their CDN CSS link for a site I was working on. Usually I just nip to the “Getting Started” page and ctrl C, ctrl V the link but this day I took a double take as the usual CSS link was replaced by an option to add your email to receive your CDN link. After a slight pause and following the instructions on the site to get to the updated 4.6.3 version of the icons I realised the new link code was JavaScript rather than CSS. This confused me a bit further but eventually I have came to understand the new layout with Font Awesome and thought I’d share it in-case it could help anyone else.

TL;DR

  1. Font Awesome now asks you to submit an email for an CDN JavaScript link to use in your sites. You can still download and host Font Awesome yourself normally, but there isn’t the usual CSS link waiting there for you to copy and paste anymore.
  2. You can control, add, edit and remove sites that you use Font Awesome on now by creating an account on the Font Awesome CDN page (cdn.fontawesome.com), which you will get a link to at the bottom of the email you get when you submit your email for an embed code on the Font Awesome site.
  3. The new Font Awesome layout defaults to a JavaScript embed code, but once you’ve created a CDN account you can go in and edit your different embed codes that you now manage and set up, selecting the option to use either CSS or JavaScript. The latter now apparently offering more features in auto syncing, updating, and accessibility.

Getting Started…

To help I thought the best solution would be to do a wee trial run through the new Font Awesome set-up with some screen shots for visual aids! So to get started as you might know you’ll need to jump over to the Font Awesome website.

Once you’ve got over to the Font Awesome site if you’re familiar with the layout you’ll be heading to the get started link, if you’re new to the site you’ll find this up in the top navigation. Next you’ll find yourself at the screen you see below. Back in the old days here you would be able to copy and paste the CDN CSS link and be on your merry way. Its a bit different now and to get the new CDN link you’re going to have to submit your email address.

font awesome screen shotYou can’t really miss it but I’ve got a big orange arrow on the image above showing you where your putting your email address followed by clicking on that great big “Send my Font Awesome embed code” button! Once you’ve done that just jump over to your mail client and wait for the email, you’ll get a success message on the Font Awesome site like the screen below to help you know you’re on the right track to icon heaven!

fa-sucess-screenOnce your email has landed in your mailbox, open it and you should see clearly at the top your custom JavaScript embed code; paste the code into your site as you normally would and your good to go with Font Awesome icons, however, scroll down the email a bit and you’ll find the button to register your Font Awesome CDN account. Click the button and you’ll be taken to the Font Awesome CDN website.

fa-email-buttonOnce you have finished creating your Font Awesome CDN account by adding a password to the email you used to get your first embed code, you end up at a screen like the one shown below. One of the arrows in the image below points to the main reason you are here…your Font Awesome embed code, but you’ll see this is still the JavaScript link you had in your email. The option you have now though is over on the right hand side of the screen; click on “Edit options” – there is also a delete option here if you are no longer wanting to use this embed code for whatever reason. Just don’t mix these buttons up or that could be annoying!

fa-embed-code-list

Once you click the “Edit options” link you’ll be taken to a page like the one shown below, where as I’ve pointed out with some arrows there are a few options. The first one to draw your attention too is the ability to change your embed code from JavaScript to CSS at the “Format & Options” section of the page. You’re embed code is displayed at the right of the screen where you can copy and paste it, there are some instruction on the page as well on the right hand side and lastly you can give your embed code a “Name” so you will be able recognise and associate it easier compared to the default ID name Font Awesome applies. Once you’ve made any changes the save button can be found at the bottom of the page, along with another option to delete the embed code if you no longer need it.

fa-embed-options

Once you’ve made all the changes you need and have clicked “Save” you’ll simply enough find yourself back at the Font Awesome CDN home screen where you embed code will be sitting there ready for you to use either as a CSS link or a JavaScript link. There is again your option at the top right of the screen to add a new embed code for another site rather than having to go back to the Font Awesome site and add in a new email address. If you are using Font Awesome icons across a large amount of sites or applications then I could see the advantage of making a new embed code for each site, having it named accordingly, it could be a nice way to manage your sites with some custom options and variations if you need it. If however, you only have a handful of sites that are similar, then I can’t see why you wouldn’t just use the same embed code across all of your websites.

fa-css-link-screen

That should have given you a good run down of the new way Font Awesome is letting you manage and embed their Icons where you need them, and on their site you can find some great information regarding their use of JavaScript for the embed option to help with auto updates and accessibility, an interesting read if you have some more time.

Thanks for reading!

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.