Icon-Font : Using with WordPress

Icon-Font is Icons but is in Font format – that simply means, what you used commonly as image and increased your page loading time can be reduced and made cool. Icon-Font is nothing new – with the introduction of Twitter Bootstrap, we all know about Icon-Font – may be the terminology was not known to you, but you have seen them. In this article, we are giving some great idea, resources for using this cool Icon-Font for your WordPress website.

Icon-Font : Using with WordPress

At least there are four Icon-Font WordPress Plugins at the time of writing and publishing this article cum guide :

But, as we are – never that much interested at increasing the number of plugins plus we do not want to add rigidity to the chance of creativity, to use the method, you actually need your WordPress website’s theme to be fully HTML5 one. If you lack knowledge on HTML5, you can read this article.

Now, we usually need just an extra CSS file to load the library of Icon-Fonts. That is quite easy in WordPress with WP-eneque script method of CSS loading. In other words – instead of messing up your original Theme CSS file, you can load it separately. Obviously, you can include the CSS file within a single post or page in case you are not going to use the set of Icons throughout the website – like in squeeze page. In-line CSS, including CSS within script markup is no longer a CRIME to Google as far they are not huge. So, each and every link is quite important in this guide.

Icon-Font and WordPress : Basics

So, the CSS loading, as far you far you understood is a must component. We are providing some resources for Icon-Font in this guide (copy-paste the URLs) :

We are giving and working example how to use Icon-Font in WordPress as step by step process :

Step 1 is to select your lovely set of Icon-Font and get the CSS file (plus Font files stuffs, most will have). Place in proper directory via FTP. I can not think you can not do it yourself. Now, load the Icon-Font CSS with our WP-eneque script method of CSS loading, so in front end, you will get the CSS as HTML rel output :

<pre>http://mfglabs.github.io/mfglabs-iconset/css/mfglabs_iconset.css</pre>

Obviously, you must include (or upload the stuffs on your own server, which I said – I can not think you can not do it yourself), otherwise the relative path will loss the value and nothing will work.

Step 2 is the Final Step. Usually the Library defines how to use them, for example, in our case, the HTML is :

Working example (without Links) :

You will notice that we do some more fun in some articles, like in this Strategic Requirements for Including Cloud computing article. All those icons beside Table of Contents, Go To Table of Contents of This Article – are in-line Icon-Font. Another example of Icon font :

This is a tick mark icon from our Icon Font Library.
This is not a graphical element.

Obviously, you can make the fonts in Data URI format like we do for fonts.