Use Font Awesome With WordPress Without Twitter Bootstrap

Want to use retina display ready icons for your website. If so then why not use font awesome, an ionic font which has been developed by Rachel Baker. She is an independent web developer and loves to create clean stuffs in CSS.

Actually font awesome has been developed on twitter bootstrap. This makes font cross browser compatible ( even internet explorer 7 is supported ), powerful and adaptable. This single font consists of 220 different types of pictographic language of web related actions. But still you can easily modify them all with simple CSS modifications. The best part is that, since these icons are vector graphics so you can scale them to infinite level without losing any quality. And the best part is you can use it to create your own commercial product without any copyright issues.

Using Font Awesome Icons With WordPress

BEFORE : Their was a problem with its use. You cannot use it directly with any wordpress theme unless you have or you import twitter bootstrap style-sheet. It means in-order to use it you must have knowledge about web designing and development. This whole process made the task very confusing for common bloggers and webmasters. But with time everything changes.

Once know as :

Is now known as :

NOW : But then finally this problem was solved after the release of a plugin. Rachel Baker again did a great contribution to wordpress community. She developed a plugin which could easily integrate with your existing theme and allows you to use font awesome icons without any limitations. So now you can easily integrate the icons in your blog posts or pages with simple use of short-codes or HTML.

Using Font Awesome Icon Plugin With WordPress

Below I am providing the steps with which you can implement the icons. You have options to set the different sizes, add hyperlinks and many more. You can even use them with your theme, this will help you make your complete design retina display ready. Remember that you have to add the HTML codes in the ” Text editor ” of wordpress. If you add the codes in ” Visual editor ” then you will not be able to see any icons.

Steps to add inline icons :

Below I am showing the simple test of how to add the github icon in the article.

<div style="font-size: 42px">
<i class="icon-github"></i>
</div>

And if you want to show some text along with it, then use the below code.

<div style="font-size: 42px">
<i class="icon-github"> Follow Me On Github </i>
</div>

Now if you want to add the social media icon and at the same time you want to add hyperlink. Then simply follow the instructions provided below.

<a rel="nofollow" class="btn" href="http://twitter.com/blogvkp" style="font-size: 42px">
<i class="icon-twitter"></i></a>

But if you still feel all these setting very difficult, you can simply move with shortcodes. They are easy to use and implement. But I don’t think you will be able to add links or drop down menus using this method.

You can simply visit to font awesome icon plugin respiratory at github. Over there you will be able to download the plugin. You can also see all the latest updates, examples, credits and authors who have contributed in this project. You can also see the license. Or if you want to know more about the icons and want to see all of them, then please visit font awesome icons at github. I wish you would have liked this guide and will surely use it in your next project.

Related posts:

Best WordPress Twitter Plugins For 2012 : Top 5 Add Custom Fonts To WordPress Using @Font-Face And CSS Add Related Post To Genesis Themes Without Plugin Standard Theme Review 3 GTmetrix Plugin For WordPress : Improve Your Website Performance