There are massive advantages in using fonts for icons or glyphs in place of images. Advantages include; significantly smaller filesize of a font versus an image, fonts scale and retain perfect quality and fonts can be easily manipulated with CSS.
It can therefore only be good to use icons in font format rather than image based icons on your WordPress Website.
Icon Font Choices
There is an abundance of great icon fonts available, both paid and free. Most of the free icon fonts are distributed with a Creative Commons licence (so please respect the license and give attribution where required). Here are some of the more well known Icon Font distributors; IcoMoon (free and paid) , Iconic (free), Entypo (free) and Font Awesome.
How to install Icon Fonts
Many of the download packages from the Icon Font designers/distributors include image and @font-face files. For Web Development we are most interested in the implementation and use of the @font-face.
I highly recommend using the LESS CSS preprocessor when using Icon Fonts as it makes changing e.g. colours SO much quicker and many of the Icon Fonts come with .less files included. I covered how to include LESS CSS in WordPress and there are so Plugins that also allow for using LESS in WordPress.
To ensure that the @font-face file/s are available for your Website visitors to use:
- Upload the LESS or CSS file provided with the Icon Font to your Webserver.
- Insert the following line near the top your style.css file (change the URL and file name as necessary):
How to use Icon Fonts in WordPress
The CSS and HTML differ depending on what icon @font-face font you’re using. With Entypo for example we need to declare the class and then insert the hexidecimal value of the icon. For example, to show the heart empty icon when using Entypo we’d insert the following into the HTML editor of our Page or Post (Entypo has an Online character map):
I just love Twitter Bootstrap and so am naturally inclined to use Font Awesome when needing to use glyphs on WordPress Websites (Font Awesome is designed for use in Bootstrap). Inserting an icon using Font Awesome just needs the class declared in the CSS/LESS. To insert an empty heart icon just add the following to the HTML editor where the icon is required.
Need to know more about using Icon Fonts?
As there are subtle differences in how many of the font icons are used, it’s recommended to go to the homepage of the font icons and read up how to use them. This Post however shows typical usage in order to get you started.