Adding 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.
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.
- Including a remote library through a CDN
- Downloading the files and hosting it on your site
- 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.