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:
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.
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!