/The Latest /Tutorials & Code Repository

Adding Font Awesome to Your WordPress Menus

Are you prepping your website for the upcoming wave of retina displays, odd-shaped devices, and more? One way to help ensure that your website loads blazingly fast and looks great on every device is to use fonts when possible instead of graphics.

Take our navigation menu, for example. Traditionally, you would create image icons for navigation elements (like a home icon) and then display the images. The problem is that images don’t scale up well; so, you had two choices:

  1. make larger-than-necessary images to handle scaling up, which added bloat to your site; or,
  2. make perfect-sized images, and to hell with fancy retina displays or accessibility.

Enter the Font “Image”

The great thing about text vs. images is that text scales really well. When zoomed in, it still looks great. So…some clever people decided to start making icons as fonts instead of images. And some really nice people made those fonts freely available.

Enter Font Awesome.

Font Awesome for WordPress

If you’re not familiar with Font Awesome, it’s a group of font icons. Instead of using an image for a “home” link, you can use the Font Awesome icon-home, add text styles, and scale it up to your heart’s (and your visitors’ resolutions) content.

One frustration for WordPress users, though, is the inability to add icons or HTML to navigation menus. We just changed that.

We use Font Awesome icons here on the New Nine site in our menus. And now you can too.

Font Awesome Menus Plugin

Font Awesome Menus

We just released (today) the free Font Awesome Menus plugin for WordPress. You can read the documentation on WordPress’ site.

Download it, install it, and start using Font Awesome in your navigation menus, posts, and anywhere else in your theme! You can learn more about Font Awesome here.


Did you enjoy this? Share it so others can too!

Got a question or comment?