How to Use Font Awesome Twitter Bootstrap Icons in WordPress

Using icons is a great way to add a bit of personality to your website while improving usability. One of the most efficient ways to load icons is by using a font.

Font Awesome is an iconic font designed for use with Twitter Bootstrap. The icons have cross-browser support and even support IE7, should you be so unfortunate to be have to support it. There are 220 vector icons in the font and they were designed to be infinitely scalable and compatible with screen readers.

Font Awesome Icons Plugin for WordPress:

Font Awesome Icons is a new plugin that makes these icons available to you within your WordPress site. The cool thing about this plugin is that it doesn’t require Twitter Boostrap so you can use it with any WordPress theme.

The Font Awesome Icons plugin was created by Rachel Baker, who is also the author of BootstrapWP, which we featured in 7 Free Twitter Bootstrap Themes for WordPress. Rachel is always creating cool things with WordPress. She made the Font Awesome Icons plugin to be something that you can use independently of your theme, which means you can change your design and keep your icons.

How to Add Icons Using the Font Awesome WordPress Plugin:

There are two easy ways to add icons using this plugin – HTML or Shortcode.

Add Icons Using HTML
Adding the icons using HTML is just as easy as using the shortcode and it provides greater flexibility. You simply add the icon name to the class name like so:

1
<em class="icon-umbrella"></em>

This produces a tiny umbrella icon.

You can make the icons bigger by increasing the font size:

1
<div style="font-size: 44px;"></div>

The inline style is just an example, but you’d probably be better off putting the font size in your stylesheet.

Add Icons Using Shortcodes

If you find it easier to use shortcodes than HTML, you an add the icons by specifying the name within the shortcode like so:

1
[icon name=icon-pencil]

This will work for post and page content, but you will probably need to go with the HTML for using the icons outside of the post editor screen.

You can view all 220 of the Font Awesome icons at github and use this as a reference. New icons are being added to each new version so you can expect the resource to continue to grow. Use them in menus, buttons, posts or anywhere you like. Many thanks to Rachel Baker for creating this cool new plugin. Download Font Awesome Icons from github.

Tags ,

Comments (5)

  1. Thank you for your wonderful tutorial for using Font Awesome icon for wordpress. I found more than 10K websites among top 1M use Font Awesome icons in their websites. it is really getting more attract from web developers and designers. You can enjoy in http://fontawesome.info

Participate