Using icon fonts in Drupal 7
You are here
What is font Awesome?
Font awesome is an icon font. Icon fonts have custom icon sets that are stored on web fonts, making it possible to add icons to your design without having to use images. All you have to do is add the font set to your site folder (like you would add any custom font to your website), a couple of css and html lines and you are good to go!
Why use icon fonts?
There are lots of great reasons to use icon fonts instead of regular icon images.
Font icons are delivered as a font file and embedded like regular font. You can apply every style you would add to a font to the icons and easily change them without having to use your photo editing software. you can;
- Scale them to make them larger or smaller.
- Change their colors live
- Add various effects like shadows, stroke effects, gradients, css-transitions etc.
Check out this Round-up of font icons.
Ok, But how do I use icon fonts in my Drupal theme?
You can add icon fonts to your drupal theme the same way you would add a font from google fonts or font Squirrel to your theme. We will demonstrate this using font awesome.
- Grab the font-awesome folder from their git-hub page
- Unzip the folder into your theme/fonts folder.
- Arrange the font files (.eot, .ttf, .svg, .woff and .otf) in your font folder making sure that they are in the same folder level as the font-awesome.css file.
- Open your [themename].info file and add the following lines to it:
stylesheets[all] = fonts/font-awesome.css
stylesheets[all] = fonts/font-awesome-ie7.min.css
These lines tell drupal to load the font-awesome stylesheet to your website pages.
Go to your drupal site and refresh your caches. If you check your page source you can see that the font-awesome.css has ben added to your head region.
Using the font icons in your pages
You can now add the font-awesome icons to your webpage. The font-awesome website has some examples and detailed instructions of how to use the icons.
To display a phone icon, simply add the following HTML to your page.
You can experiment with this purely CSS navigation using Font Awesome created by Marco http://cssdeck.com/user/m412c0 on cssdeck.com.
Click on the HTML and CSS tabs to see the source code. You can change the code and experiment with it to understand how it works.