Using Font Awesome Twitter Bootstrap Icons in WordPress

Using 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:

{code type=html}

This produces a tiny umbrella icon.

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

{code type=html}

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:

{code type=html}[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.

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.