How-to Add Font Awesome To Your Website

Font Awesome gives you scalable vector icons that can instantly be customized. How can the icon be customized? The size, colour, drop shadow and more can be customized through CSS. Font Awesome is free, currently consists of 369 icons, there is no JavaScript, works nicely with Bootstrap and each icon can be customized easily through CSS.

Font Awesome CDN

You can use MaxCDN’s hosted Font Awesome, by adding the following code snippet in between the and HTML tags:

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

You will notice 4.0.3 in the above code example. This is the version of Font Awesome. If you are using or going to use another version, please make sure you change the number.

Font Awesome CDN for WordPress

If you want to use MaxCDN’s hosted Font Awesome for a WordPress blog, you can create a custom function and add it to your theme’s functions.php file.

// Add Font Awesome to my blog function add_font_awesome() { wp_enqueue_style('font_awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', false, null); } add_action('wp_enqueue_scripts', 'add_font_awesome');

Self Hosted Font Awesone

If you want to host Font Awesome on your own hosting account or server, you can download the latest version here.

Add the following code snippet in between the and HTML tags:

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

Please make sure you also uploaded the fonts directory. The fonts directory should be up one level from the css directory.

Self Hosted Font Awesome for WordPress

If you want to use MaxCDN’s self hosted Font Awesome for a WordPress blog, you can create a custom function and add it to your theme’s functions.php file.

// Add Font Awesome to my blog function add_font_awesome() { wp_enqueue_style('font_awesome', get_template_directory_uri() . '/css/font-awesome.min.css', false, null); } add_action('wp_enqueue_scripts', 'add_font_awesome');

In the above code snippet, Font Awesome would be hosted in the css directory of your theme’s directory. So, if your theme is called blue, you can expect the stylesheet URL to look like this:

<link href="/wp-content/themes/blue/css/font-awesome.min.css" rel="stylesheet">