Power Your WordPress Site With Font Awesome Twitter Bootstrap Icons

By Sanjeev Shrivastava Our Bestseller: WordPress Themes

You would have seen awesome icons used with Twitter Bootstrap. These icons increase usability as well as contribute in improving your websites reputation. Why not directly use those icons in your WordPress site? It seems good idea, but how? I will tell you the easiest way of using these icons easily in your WordPress website.

As Glyphiconsprovides a set of cool icons for Twitter Bootstrap. There is another champ which offers 249 icons with just a single font. Font Awesomeis an iconic font designed to use with Twitter Bootstrap. Icons are cross browser compatible and also have supports in IE7.

Let’s learn how you can use Font Awesome in your website. To use these icons you need to install ‘Font Awesome Icons’ plugin in your WordPress site. Good thing about this plugin is that it doesn’t need Twitter Bootstrap so that you can use it with any WordPress theme. You can see all available icons HERE.

To download this cool plugin from GitHub Click Here. Upload the plugin and activate it from your WordPress dashboard.

Let’s see how you can use these plugin and add icons in your WordPress site. Basically this plugin offers you two ways to add icons, HTML and Shortcodes. See all codes HERE.

Adding icons using Shortcodes:

You can simple paste the shortcode anywhere in your post or page to add an icon. You only need to specify the name of the icon in shorcode. E.g. If you want to add icon of music player simple put the shortcode like:

[icon name=icon-music]

This will work pretty well in post /pages, but what about outside that?  You will need to probably go with HTML codes. Of course you can go with HTML code but you can also use shortcodes to add icon anywhere else in your WordPress site.

This will create “music icon” for you. You can use ‘do_shortcode()’ method to add icon in theme template files.

Adding icons using HTML:

If you think HTML is easier to play with, then you can add icons using HTML codes. Just put simple code like this:

This will create “music icon”.

Using HTML to add icons in your website gives you additional advantage by adding flexibility to icons as you can adjust the size of icons by increasing/decreasing font size. For example if you want to create a large music icon you can simple use the HTML.

To increase credibility of your website you should use Font Awesome. It looks great when icons explain things. Font Awesome offers you collection of all the icons as font that you will need. By doing simple tricks you can amazingly use this plugin and create icons in your menu bar of your website. Its up to you how you utilize this wonderful plugin.

About Sanjeev Shrivastava
author

Sanjeev loves web and his blog InfoTuts. His curiosity to know how things actually work keeps him active and inspires him to learn new things. He loves to help people. You can join him Here

Comments and Responses

Share on Google Plus

About Unknown