The awesome ‘Font Awesome’!

Font Awesome | Admarks: The Design Club

Font Awesome! Sounds great, doesn’t it! Sounds like a font you could do a lot with! Sounds like a font that would be awesome, if you knew what it could do!

What is Font Awesome?

Font Awesome is just that, awesome! Well, in fact, it’s not really a font at all. Well, it is, but not a font you’d use for text anyway. It is an icon font.

As an icon font, it is extremely useful. This font is an icon web-font! Combined with a little CSS and html, and you have scalable vector icons for websites!

Look Up!

Where?

Up!

Well, just look at the title of this page. Then look at the date and author just below the title. Notice a little clock , and an author icon? There’s font awesome at work!

They are just two of the 519 icons available with font awesome. More get added.

The best news? It is completely free and open source to use. You can download the web-font, and you can download the desktop version and use the icons in your designs for clients!

As described on the font awesome website:

In a single collection, Font Awesome is a pictographic language of web-related actions.

 

Here is just a very tiny sample of the icons available:

Font Awesome

 

Here is the WordPress Logo as a Font Awesome icon:

So, how do I add Font Awesome to my website?

That’s easy. First of all, download the kit. Your kit will contain all the web-fonts, and the true type and open type versions for desktop use. It’s worth downloading the kit just for those. Once done, upload the kit to your web project, and insert the stylesheet reference to the head of your html file, eg:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

You don’t really need to host the webfont yourself. The guys at MaxCDN have a CDN repository for Bootstrap, and since Font Awesome was initially designed to work with Bootstrap, MaxCDN have this sorted. It’s free, and it’s fast (not hosting the font yourself will add a sliver of extra speed juice to your site).

So, all you really need to do is add this to your html header, and you’re good to go:

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

Rails projects with Ruby Gem? You can use it too. Font Awesome comes with LESS and SASS. Find out more here.

I want to add it to my WordPress theme. Argh!

Easy, easy, easy! You could just add the link above from MaxCDN into the header section of your theme (look for the header.php template, and insert it into your header section).

Ideally, though, it’s preferable to enqueue the css reference through your theme’s functions file (usually functions.php. Replace mytheme referenced in the code snippet below with something else, such as your theme name).

Add this code below:

function mytheme_scripts() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Your theme may already have a function to enqueue styles and scripts, in which case you should just add this line with them:

wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array() );

In our case, we enqueued our Google Font as well, and placed Font Awesome after it, and placed it after the enqueued theme style, and the enqueued Bootstrap style (which is also enqueued directly from the BootstrapCDN by MaxCDN ).

In fact, as we are a sharing site, here’s our entire enqueue function that we use for this site with font awesome included (with certain references changed to namehere):


/**
* Enqueue scripts and styles.
*/
function namehere_scripts() {

wp_enqueue_style( 'namehere-bootstrapmin', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css', array() );
wp_enqueue_style( 'namehere-style', get_stylesheet_uri() );
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Alegreya+Sans:300,700,300italic,500,400', array() );
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array() );
wp_enqueue_script( 'namehere-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

wp_enqueue_script( 'namehere-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'namehere_scripts' );

(Please note, if you are really not sure about editing your theme’s functions file, get someone to help you who knows. We are not responsible if you break your site. Back-up your site first!).

Now the fun begins. Use Font Awesome!

 

About Paul

A graphic and web designer from the UK, based in Australia. Specialising in WordPress Theme design & development, print and online graphic design and illustration.

Leave a Reply