Font Awesome

font-flag

I love using icons on my websites. They can make websites more intuitive and straight-forward for visitors to use if used in the right way. Adding .png files as icons is cumbersome and inflexible so when I discovered icon-fonts it was a breath of fresh air and now I’m always looking to use them where I think I should.

There is a big, long list of icon fonts out there but the one I use mostly is Font Awesome.
It has 369 icons in the set, is very well documented and a piece of cake to use.

To get started just add this code to the head of your website.

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

If you want to add Font Awesome to a WordPress theme use this code anywhere in your functions.php file.

/**
* Register and load font awesome
* CSS files using a CDN.
*
* @link http://www.bootstrapcdn.com/#tab_fontawesome
* @author FAT Media
*/

if ( !function_exists( 'prefix_enqueue_awesome' ) ) {
function prefix_enqueue_awesome() {
wp_enqueue_style( 'prefix-new-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
}

You can now add icons to your website by using the icon tags found on the icon page and the icon class can be manipulated in your css just like any other font.

Example:

<i class="fa fa-thumbs-up"></i> fa-thumbs-up
.fa-thumbs-up {color:red;}

fa-thumbs-up

There are many ways you can use font-awesome icons, all the examples can be seen on the example page.

Spinning Example:

<i class="fa fa-thumbs-up fa-spin"></i> fa-thumbs-up

fa-thumbs-up fa-spin

Previous

Next

No Comments

Leave a response