March 18, 2013

Pro tip: Add a home icon to your top navigation

By University of Washington

WordPress home icon

Ever wonder how to get that nifty home icon on your top navigation bar? It’s actually just a simple class added to a menu item. If you’re using the UW WordPress theme and already know how to customize your top menu, then you’re ready for our step-by-step tutorial below.

Important: I should add that you’ll need to be hosted by the Web Team for this tutorial to work. You may have luck if you’re using self-hosting our WordPress theme, but your results will depend on what version you’re running and on what customizations you’ve made.


How to add a “home” icon to your top navigation menu

  1. From the WordPress Dashboard, go to Appearance > Menus.
  2. From the Menus page, click the Screen Options drop-down screen in the upper-right corner.
  3. Make sure CSS Classes checkbox is checked.
    • Check CSS Classes checkbox
      Click image to enlarge.
  4. Open (or create) your top navigation menu and add a menu item that points to your homepage.
  5. Expand the menu item by clicking the down arrow.
  6. Enter the text home-link in the “CSS Classes (optional)” field.
    • Add home-link class
  7. Save your menu and view your site to see your new home icon.
    • Screenshot of navigation bar with the "home" icon

Comments are closed.