The WPLift Guide to Using Icon Fonts with WordPress
While many of the latest themes do make use of this design feature, adding these icons to your site needn’t mean a change of theme.
In this article you can find out where to get these fonts from, how to use them on your WordPress site and some ideas for making use of them on your site.
What are Icon Fonts
They are basically a font that is made entirely of icons. You might be familiar with the fonts of old such as the Webdings and Windings fonts. Icon fonts are similar in appearance to those fonts except the ‘characters’ usually relate more closely to modern web design icons such as social network logos, smartphone symbols and shopping carts to name but a few.
Essentially icon fonts are vector icons that have been embedded into a webfont for use on webpages including WordPress sites.
The benefit of this is that the icons load faster than regular images and the file sizes involved are a lot smaller. Icon fonts are also excellent for use on responsive designs as they are much better at scaling while maintaining their proportions than that of most images types. When it comes to incorporating them into your site’s design, it is also worth noting that changing their colour is very easy as they can be styled in much the same way as regular text based fonts.
How to Use Icon Fonts
So now that you are sold on the idea of using icon fonts, you might be wondering how you go about adding them to your WordPress site.
The first step is to find the font you want to use and then embed it into your WordPress site. Thankfully the best fonts of this type are free and it is even possible to build your own icon font set that comprises of just the icons you want to use. This can help keep files sizes down, helping to keep your website loading quickly.
Alternatively you can install a plugin that will do most of the hard work for you and allow you to get started straightaway.
Examples of Icon Fonts
As this way of rendering icons on websites has grown in popularity the number of icon fonts available has continued to grow. The good news is that most of the main offerings are free to use so there is no barrier in the way preventing people from using these attractive icons on their sites. Here are some of the most popular offerings:
Font Awesome is one of the most popular icon fonts out there and as well as having 361 icons (at the time of writing) it is free to use. It is being regularly updated and the list of available icons has been growing steadily. The icons are divided into a few different categories which can give you an idea of how they can be used, including:
- Web application icons
- Currency icons
- Text editor icons
- Directional icons
- Video player icons
- Brand icons
- Medical icons
Whatever your sites topic, there should be something on that list that can be appropriated for it making this font a great choice for everyone.
One of the problems that can occur with icon fonts is that they can cause problems for those reading screen readers as the characters used by the fonts are read out by the reader. Font Awesome claims to not suffer from this issue and is screen reader compatible.
When it comes to using this font on your WordPress site, there is a free plugin which allows you to insert these icons into your posts and pages using shortcodes. To insert the icons in this way you can enter the shortcode including the name of the icon you want to display:
You can also display the icons on your pages, posts and in the theme files by using:
The full list of icons, along with their names can be found here.
By using the Font Awesome Menus plugin you can also add these icons to your WordPress menus as well as your posts, pages and themes. Here is a quick menu I made using this plugin:
To add these icons to your menu simply add ‘icon-iconname’ to the ‘CSS Classes’ field of the menu item.
Here are links to the related plugins for Font Awesome:
Genericons is ‘a free, GPL, flexible icon font for blogs’ and while the icons in this font isn’t the biggest out there, there is a free WordPress icon font plugin called Gernicon’d. This plugin makes using these fonts on WordPress sites even easier and allows you to display them using HTML, CSS or shortcodes.
The plugin also displays all the icons that make up this font inside your WordPress admin area for quick reference to what is available.
We Love Icon Fonts
This website is actually a ‘free open source fonts hosting service’ which allows you to select the fonts you want to use from a list of eight options including Font Awesome. It then gives you the code for adding to your site’s CSS file and the code for adding the icons into your WordPress pages and posts.
It’s a very simple service to use and is a great way for viewing the top icon fonts in one place and deciding which ones you want to use.
Icon Moon has a free version with 450 icons as well as premium packs starting from $39 for 900 icons. They also have a free app which allows you to create your own icon font by selecting icons from the available fonts and making one font file containing your choices. This saves you from having to load multiple fonts when using icons from a range of different sources.
The service also has an Icon Delivery Network (CDN) where they will take care of the hosting of your fonts, preventing the use of these font icons from slowing down your page load times.
Other places to pick up free icon fonts include:
Widget Icon Plugin
This free plugin uses the icons from the Font Awesome and the Elusive libraries giving you access to hundreds of icons.
These icons can then be used on your WordPress widgets allowing you to add relevant images to each sidebar item of your choosing.
The Widget Icon plugin is very easy to use and once installed adds a drop down menu to each sidebar widget allowing you to select an icon from the list of available options. The plugin displays the actual icons and not just the name making it easier to pick one from the list. You can also change the location of where the icon will be displayed, the size and the colour. The icons can also be used throughout your site and not just on your widgets.
Widget Icon has been designed for Twitter Bootstrap so is ideal for responsive themes.
Hopefully you now understand what all the fuss about icon fonts has been about and why they are so popular on current website and WordPress theme designs. By following the tips in this article you will be able to get up and running with these icons and start adding them to your site either by following the instructions on the icon sites or using the plugins covered here.
While these icons are popular and using them is pretty straightforward, it doesn’t mean everyone has to use them everywhere, so think carefully before making use of them and deciding if they can really enhance the usability and design of your site or not.