How to easily add an icon font to your website

headerAdding icons to your website gives it a fun visual flair and a bit of character. It also can have a positive effect on user experience – a common usage is to put these familiar icons on menu links. Like SVG graphics, icon fonts can be scaled and easily manipulated losslessly so you can have larger icons for different interfaces that change color when a user hovers over a link.

Three of the most popular (and easy to use) icon fonts these days are Font Awesome, Ionicons, and Themify Icons. Here’s how you can get them running.

Installing the fonts

The first thing you need to do is to get the fonts installed onto your website and there are three ways to do this.

  1. Including a remote library through a CDN
  2. Downloading the files and hosting it on your site
  3. If you’re using WordPress, you can install the corresponding plugins for Font Awesome and Themify Icons

For the first two options, clear instructions are given on their main page. Using a CDN has some distinct benefits (spreading the load over many servers, bandwidth), but it would mean users would be loading a script from an external source (so be sure they are trusted!). Once the fonts are installed you are good to go!

The basics: using the font’s markup

Using the icons is easy, all you have to do is to insert the appropriate HTML markup. On the font’s website, you can find the font code you need to include it in an HTML class. For example, to insert the camera icon using Font Awesome, all you have to do is insert the code (fa-camera-retro):

<i class=”fa fa-camera-retro”></i>

For Ionicons and Themify Icons, use <span class=”[code]”> instead. Here is the example code for both Font Awesome and Ionicons.

Let’s step it up with CSS

If you have a passing familiarity with CSS, you can really have fun with manipulating them, helping you call attention to a highlighted link, for example. Using the :hover pseudo-property, this is easily achieved. Here is the same example with some short lines of CSS to change the color, size and even add a border when the user hovers over the icons. Do note that I added an icon class to each of the icons to keep it clean.

Hopefully the above gives you a head start in trying out icons on your website. Once you get going, you’re probably never going to look back to using icon images again.

Fields marked with an * are required

Want to see more of posts like these? Subscribe to be updated with occasional highlights. Don't worry, we hate spam as much as you do - we will not share your email with third parties.


Comments