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

9 Comments

  1. Crystal Green January 24, 2015
  2. Jenessa Mullen January 24, 2015
    • Aeryn Lynne January 24, 2015
  3. Jenessa Mullen January 24, 2015
    • Aeryn Lynne January 25, 2015
  4. Pingback: Blogathon Day 2 – Update February 24, 2015
  5. Satbir Patial March 5, 2015
    • Aeryn Lynne March 5, 2015

Leave a Reply

Geek Things to Do in Toronto

Check out all the geek fun to be had when you're traveling in Toronto, Ontario, including Hotels, Restaurants, Shops, Games and more!
Time to Get Nerdy!
shares