Header image for Space Out Coding

The Advantages of Font-Awesome


Sometimes, web design can be difficult. Not everyone is great with graphics. And even if you are good with graphics, it can be rather time consuming making them. Sprites are great, but require a lot of time to make as well.

So wouldn't it be great if you had a pile of icons at your fingertips that didn't require much work to use? Luckily, there is. And it's called, Font-Awesome.

Font-Awesome has hundreds of icons, that are actually fonts. It might sound a little odd. Why use fonts for graphics? Did anyone actually use the symbol fonts that came with Microsoft Word?

Well, I don't know if many people did, but there are several advantages to using fonts as icons.

It just requires a little bit of code. You can either download here: https://fortawesome.github.io/Font-Awesome/

Or you can just insert some code into the header of your site:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Once you have that setup, it's a simple matter to add the icons. Let's say that you want to add the Vulcan salute () to your site. You simple use:

<span class="fa fa-hand-spock-o"></span>

And there you go. Want to make it green?

<span class="fa fa-hand-spock-o" style="color:#58FA58;"></span>

Using icons has never been easier!


  • JavaScript
  • CSS3
  • HTML5
  • jQuery
  • Bootstrap
  • Desktop/Mobile
  • PHP
  • MySQLi
  • FuelPHP
  • SEO
  • WordPress
  • OpenCart
  • Shopify
  • MediaWiki

Facebook Twitter 306-684-6040