Font Awesome Icons WordPress Plugin

Font Awesome plugin banner

Font Awesome is my favorite of the free font icon sets. All of the 220 pixel perfect icons are well designed, have great cross-browser support and are easy to use.

I am using the Font Awesome icon set to display the social icons to the header area of this site. I wanted to be able to use the icons without having to rely on my current theme, so I created a simple WordPress plugin.

The Font Awesome Icons plugin adds the Font Awesome font and necessary styles to any WordPress site. The plugin is available to download from the WordPress plugin repository or from my Github account.

Update October 7, 2012:
The plugin is no longer available from the WordPress plugin repository, but it is still available for download from it’s Github repository.

Download from Github

Usage Instructions

To use any of the Font Awesome icons on your WordPress site you have two options:

1. HTML Option

All code examples on the Font Awesome site apply: http://fortawesome.github.com/Font-Awesome/#code

Examples:
[prettify class="html"][/prettify]
[prettify class="html"][/prettify]
[prettify class="html"][/prettify]

2. Shortcode Option

Don’t want to worry about HTML tags? You can use a shortcode in your posts, pages and even widgets to display a Font Awesome icon.

The shortcode to use is [icon name=name-of-icon], where name=X is the class of the icon you would like to use.

Examples:
[prettify][icon name=icon-pencil][/prettify]
[prettify][icon name=icon-phone][/prettify]
[prettify][icon name=icon-chevron-left][/prettify]

Full Icons Set

Font Awesome Icon Set Full Vector List

18 thoughts on “Font Awesome Icons WordPress Plugin”

      1. Wow…sorry for the LATE reply. I must have missed the notification. We didn’t get as far as the browser. On our local machines they were only showing us a handful of glyphs. So far your plugin has worked perfectly.

  1. Hi!

    In addition to my earlier comment, if I remove the plugin, I can see some of the icons that come with the theme. When the plugin is active, I see two icons superimposed on each other.

    Thanks!

  2. A BIG Thank you for your Excellent “Font Awesome Icons WordPress Plugin”.
    In a next update would it be possible to add the following icons :
    - mobile phone icon (1 BlackBerry, 1 iPhone, 1 Androïde, 1 NoName – as not jealous)
    - PC/Mac screen icon
    - fax icon
    I think these icons are widely used today.
    Thanks again (and sorry for my bad english)

    1. Hey, Alain! You may have already figured this out, but Rachel doesn’t actually make the font. This is a port of Font Awesome (fontawesome.io), which is a B.A. Bootstrap and general website font. Those guys who made Font Awesome actually make the icons. Rachel here has just wonderfully added them to WordPress!

  3. Hi!

    Nice plugin! Is there a particular reason why the plugin isn’t in the WP repository anymore? If I were to use it with a theme for sell on TF, it would be nice I could recommend a WP repo plugin (for simpler installation + auto updates).

  4. Great plugin, thank you for sharing this! I was having one issue with it though. I noticed if I add the HTML or shortcode in the text view within the WordPress visual editor and save the page and preview it, the icons display fine. However, if I jump over to the Visual tab and make any edits and save then preview the page, the icons stop displaying. When I go back to the text view, the HTML or shortcode is still there and intact, it just won’t work anymore for some reason.

  5. Rachel!

    Thanks for another great pluggin. I know this comment is similar to all of spam bots that say your content is amazing. But really, it is. Your WordPress/Bootstrap tools rock my world!

  6. Another great Bootstrap addition for WordPress Rachel. I’ve only just recently got started with Bootstrap and love it. Already created my first theme (with many to come) and your plugin inspired me to put one of my own together.

    Since you have already done one for Font Awesome I opted for the Elusive Iconfont set by Aristath which has about 270+ icon (similar to Font Awesome) but for the licensing aspect of it.

    hope you don’t mind me sharing it here (its Free and on GitHub) >> https://github.com/zulfnore/wp-elusive-iconfont

    Now to go work on your BootstrapWP theme and see what I can do with it :)

  7. Thanks so much for this plugin Rachel! I really wanted to include the Font-Awesome-More CCS styles as well so added the following code and related directories for the additional style sheets and fonts in your plugin. You may decide to include in your next release. http://gregoryloucas.github.io/Font-Awesome-More/

    wp_enqueue_style( 'font-awesome-corp', plugins_url( 'assets/css/font-awesome-corp.css', __FILE__ ) );
    wp_enqueue_style( 'font-awesome-social', plugins_url( 'assets/css/font-awesome-social.css', __FILE__ ) );
    wp_enqueue_style( 'font-awesome-ext', plugins_url( 'assets/css/font-awesome-ext.css', __FILE__ ) );

  8. I’m a little confused. I love the plugin but I’m not sure how to get the icons into my main nav items. Is there another technique that is needed to add them into menus?

  9. Is there anyway with this plugin to add icons to a wordpress menu – if the wordpress theme isn’t built on twitter bootstrap? I’ve tried but it doesn’t work.

  10. I’m using the plug-in on a site that I’m developing and only the shortcode seems to be working. If I add the option within the text editor in HTML mode the tag is deleted when I switch from HTML to Visual and then back again. Also the Shortcode seems to be non-responsive to the use of icon-large and icon-2x.

    Any insight into this issue?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>