Using Font Awesome with Headway

Today’s screencast is all about using Font Awesome with your Headway powered site. Over the past year or two, icons — particularly font icons — have become popular in designing websites. Twitter’s Bootstrap, one of the most widely used HTML/CSS Frameworks – if not the most used – comes with a great icon set called Font Awesome. If you don’t want to watch the video, skip over it to the instructions below.

Installing Font Awesome

To get Font Awesome installed on your Headway Themes install, we first need to go to the Get Started page of Font Awesome’s website. From here, we’ll just follow the “Easiest: Bootstrap CDN” option. This is some pretty cool treat! Max CDN, actually hosts all of Bootstraps files for you! So since today we’re just wanting to get the font icons loaded on our site, we can hook right into their CDN and use their CSS file!! How awesome is that!?!

We first need to copy this section:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

This is going to load the CSS file for us. We’ll put this in our Scripts/Analytics section within the WordPress Dashboard > Headway > Options. It will look like this:

Headway Scripts & Analytics - Font Awesome

 

Go and and click “Save Changes” at the bottom, and we are good to move on.

Using Font Awesome in your Design

We’re going to update our post meta a bit for this step. In the video I showed how to add an icon to the Features block description text. The great thing about using icons is you can put them wherever you see fit!

Open up the Visual Editor and get to your content block. In the picture below, I’m using going to edit the content block that I’ve customized on my blog index page.

Visual Editor - Font Awesome

You’ll notice I’ve already went ahead and opened my “Meta Above Content” box and started to put some icons in. And in the VE’s Design Mode, you can see the icons have appeared. Font Awesome comes with a the ability to have different CSS classes to size the icon, you can read about them here. The other nice thing though is that you can give them your own class. So in the picture you’ll notice I added a “red” css class to the HTML i tag. That just makes them show up with a red color.

With that you can start to add icons all over on your site. Here’s a little project for you. I’ve replaced my social media icons on my personal blog with Font Awesome icons. This means it saves me loading for a plugin. See if you can figure out how I did that, so you can do it on your site! And if you take down my site with all the traffic that’s bound to head over there, hit me up on twitter – @ajmorris – so I can get it back up!

 

Spread the word!

11 Responses

  1. One thing to consider, is that while Font Awesome is pretty awesome, you’ll probably only ever end up using a small percentage of the bundled icons.

    While that may not be a big deal for most, I’m a bit pedantic in terms of what gets outputted on any given page and I loath at the thought of loading a ton of icons I’m not using.

    I generally opt to use a service like fontastic.me (a few others available, but fontastic is my personal fav), to build a custom icon font with only the icons I need for the given project.

    Then you could either upload your custom icon font to your server, or upload to one of the many CDN’s available and then use the icons as demonstrated in your video.

    One other thing – I noticed you’re using our Features block in the demo and it got me thinking. You should be able to use icon fonts for the individual feature images, by prefixing the feature title with the icon tag, ie <i class=”fa fa-calendar-o red”></i>

    • This was more of an easy way to get started with using icons. I’m with you. I actually use icomoon’s app, iconmoon.io to create my own set of icons based on what I use. I’ve found though that most people aren’t able to figure that out (I’ll have a blog post as follow up on that soon!).

      I was thinking the same way for the features block. I was originally going for a larger image that wasn’t necessarily going to be inside of the title. A good point though, nonetheless.

  2. Hi There, I have just been using fontastic.me to get my font icons which works perfectly in chrome, but doesn’t work at all in firefox. I’m struggling with this can you suggest anything? so far googling has not helped.

    • This is most likely a mime type security issue, and is a known thing with Firefox and custom fonts.

      If you google for “custom font mime type error firefox”, or similar, you will probably find what you need.

      What is will come down to is simply adding the mime types to your .htaccess file.

      You may also notice that the problem exists in IE, and the cause is the same.

  3. I have a question…I just paste the line in header as it mentioned in the instruction or video. I just tried to use in the wordpress editor and I don’t see any changes.
    Any ideas???

  4. This is a great instructional clip and very useful. Unfortunately, mine only show up as little boxes and I have ascertained that a plugin, ‘duplicator’, has font-awesome and might be clashing with it. Is there any instructions on overcoming the clash (if this is the likely cause)? It’s point 1 of this troubleshooting document (https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting) but unfortunately there is no explanation about how to make the bootstrap the priority over any other font-awesome installations.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress