){kind=link}
Font Awesome is one of my favorite tools. With simple CSS we can change the size, color, or function of the icons. I created this original tutorial last year intended for bloggers who have never touched code a day in their life. What follows after the video is a text based tutorial.
Before starting the tutorial, I want to give a shout out to David Gandy for his very awesome work!
Directions for Installing Font Awesome
2. Unzip the folder you get.
3. Take the font folder and upload it to your webhost. You can do this through your file manager if you are using Cpanel or FTP if you know that method.
4. Next, edit the font-awesome.css file found in the CSS folder. I recommend using notepad++ for this step. We will be changing the following text.
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.0.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3v=3.0.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
You simply want to change the url to where you uploaded your fonts.
5. Next upload the edited font-awesome.css file to your server using the same method as step 3. You might have a CSS directory already and this is a good place.
6. One last step! You have to add this to your header.php file before </head>. You only need to change the directory name in the example below so that it will be the same as where you placed your CSS file.
<rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/directory name/font-awesome.css">
How to Use Font Awesome
Use the following code to display an icon from Font Awesome
<i class="icon-name"></i>
All of the current icon names can be found on the font-awesome home page.
There are new classes in 3.0:
- icon-large
- icon-2x
- icon-3x
- icon-4x
You can add these after the icon-name in the class to generate a larger icon.
Example:
<i class="icon-twitter icon-3x"></i>
The other new class is an animation! Using “icon-spin” will cause the icon to rotate.
<i class="icon-spinner icon-spin"></i>
Updating Font Awesome
We are now on version 3.0 of Font Awesome. This means new icons and more special CSS classes. If you need to update from an earlier version it is very simple.
1. Download the latest file from the Font Awesome website.
2. Edit the CSS file the same way you did in step 4 of the installation tutorial.
3. Upload the new file back to your server in the same location as the previous file.
4. Upload the new fonts to the same folder where you placed them previously.
If you are prompted at any time to overwrite your previous files, say YES!
You are done! Everything should work the same, but you will be able to use the updated content.
If you have any issues leave a comment below or send me an email via the contact form.
Shortlink: (click to copy)
