Close

Add A Little Icon Flare to Your Website Using Font Awesome

Aeryn Lynne

Font Awesome is exactly as advertised, it’s full of awesome. Fonts are much easier on bandwidth than images; while it only takes a few kbs to load text onto a webpage, it can’t take MBs to load an image. So some very smart people decided that since fonts are images with much less bandwidth consumption, why not take a page from the historically popular WingDing font that graces our desktops, and make some useful image-based fonts for website publishers to use. You’ll see quite a bit of Font Awesome font-icons scattered across Geek with Style. Starting with the menus above; beside each category you should see an icon representing the category featured, such as “Technology” having an image of a laptop right beside it. That’s a font awesome icon folks. Cool, eh? Let me also introduce you to the Winter 2015 Biannual Blogathon Bash (BBB.) This post is written, ’cause I want to share this little nugget of awesomeness with everyone, but it’s also written as part of a Mini Challenge for those participating in BBB. Want to use the next 72+ hours to improve your blog, but don’t know where to start? Join this lively bunch, and have fun with a multitude of Mini Challenges to get your upgrades on a roll. There are even prizes involved if you need an extra little push to level up! Biannual Blogathon Bash

How They Put the Awesome into Font Awesome

The whole point of Font Awesome is to add a little bit of flare to your site (see what I did there?) You can use it like I have in the menus, utilize these icons to create a list of your social networks in your sidebar, or simply display some specific icons within a blog post. One of my favourite ways of using Font Awesome in a blog post is to include the sign for a specific social network when linking to someone’s account. So for instance, if I wanted to showcase the fact that @blogathon2 has a number of twitter parties happening during the blogathon, well… did you see what I did there? Or if I want to say, “Hey! Did you see what I posted last night on @AerynLynne?” it’s a cool way of dissecting when the “@account” is discussing Twitter or Instagram or Pinterest, etc. These little bits of flare can liven up a web-page with ease. And it really is easy to add Font Awesome to your site. There’s nothing to download, unless you really want to. The simplest way is to add this line of code to your theme/template’s <head></head> section: <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” /> If you’re using WordPress, first backup your site using the backup plugin you’re obviously using (like BackWPUp,) then within your Dashboard, go to Appearance > Editor in the left hand menu and then search for “header.php” in the right hand list of your theme (or if you are using a Genesis theme, look for Genesis Hooks in the left hand menu, and then find the section that entails adding code within <head></head>.)  Paste the code <link> above just before the </head> tag and then click on the Save button. If you’re using Blogger, first backup your site’s template using the feature found on your Template page (you never know what simple bits of code will mess up your site!,) then click on the “Edit HTML” button. Find the <head> tag, should be near the top of the editor page and then paste the <link> code from above directly below that tag. Blogger has a Preview Template feature, so once you’ve paste the code where it needs to be, click on Preview to make sure your site still works with the code in place. If all looks fine, click on Save Template. If it doesn’t, find a caring soul who will help you get through your template woes. Once that bit of code is in place, you can use Font Awesome’s quick and easy code to add their icons anywhere on your site!  Check out their BIG page of icons to find the ones you wish to use, and then click on the icon you’ve selected to find out what code you’ll need.  For the Twitter bird? The code looks like this: <i class=”fa fa-twitter”></i>, so your full code to add a link to a Twitter account like I did above would look something like this: <a href=”//twitter.com/username” target=”_blank”><i class=”fa fa-twitter”></i> @UserName</a>

You’ve Got Mail a Mission

Use the instructions above to have Font Awesome’s icon library right at your blogging finger tips. Once that’s done, get a little creative and use one or more of the icons listed on the BIG page of icons to add a bit of flare to your blog post. Or if you want to get really creative, add some of these icons to your website’s header or sidebar in any way that you please. For proof, add a link to your blog post (or website if you choose to add icons elsewhere on your site,) in a comment below and if needed, describe exactly how/where you added your icon(s). And that’s it! Wishing you a FUN and SAFE blogathon!

Like it? Share it!

Aeryn Lynne

The Geek at Geek Life
Living in Superman's Metropolis (aka Toronto, Canada), Aeryn Lynne found a way to entirely over-share everything she loves, and make a career out of it! Ultimately a geek, she waxes poetically over technology, fights for fashion-equality, squees over comic art, and literally sparkles, thanks to her makeup addiction.
Aeryn Lynne

Leave a comment

11 Comments on “Add A Little Icon Flare to Your Website Using Font Awesome

Crystal Green
January 24, 2015 at 12:18 pm

This is really neat for sure. I like how it just goes right into the blog post without to much of a distraction. Thank you for this challenge.

Reply
Jenessa Mullen
January 24, 2015 at 3:37 pm

I can’t seem to get it to work in Blogger. I keep getting an error message that I need to close the bracket. Any ideas if I should add in an end link and where? Or any other suggestions?

Reply
Aeryn Lynne
January 24, 2015 at 3:45 pm

Hi Jenessa,
Sorry, made a little error in the link, but it should be fixed now. :/
When blogger askes for an end link, its talking about “/”, so in this case the stylesheet link should actually be <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” />

Hope it works now for you!

Reply
Jenessa Mullen
January 24, 2015 at 5:20 pm

Thank you! I will try it again. 🙂

Reply
Jenessa Mullen
January 24, 2015 at 11:18 pm

It worked – thank you! 🙂

Reply
Jenessa Mullen
January 24, 2015 at 11:22 pm

Ok, it’s working now. I added a couple icons to the end of this post, just to see if they would work. Going to experiment more with adding them around my blog. Thanks again! 🙂

http://motheringinreallife.blogspot.ca/2015/01/blogathon-day-2-update.html

Reply
Aeryn Lynne
January 25, 2015 at 1:05 am

YAY! So glad it worked out for you Jenessa, have fun experimenting with it! 🙂

Reply
Blogathon Day 2 – Update
February 24, 2015 at 12:14 am

[…] Finished 2 mini challenges: Managing Twitter with Tweetdeck and Add a Little Icon Flare to Your Website Using Font Awesome […]

Reply
Satbir Patial
March 5, 2015 at 4:11 pm

Wow, you have told me to use these icons in very creative way. Thanks ! Next time I will remember these creative ways to add these icons in my posts. I am already using them in my blog template although. Nice tut.

Reply
Aeryn Lynne
March 5, 2015 at 11:22 pm

Thanks Satbir! I had fun making this tut, so glad it helps. 🙂

Reply

[…] Awesome icons Done! The little icons next to the headings in this post are Font Awesome icons. So easy to add these Font Awesome icons with this tutorial from GeekStyle and love these […]

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

shares