Replace Navigation Text with Icon Font

Looking to replace a navigation item with an icon font in WordPress? This little snippet placed in functions.php will do just that:

add_filter( 'wp_nav_menu', 'my_page_menu_link_names' );

function my_page_menu_link_names( $menu ) {

    $menu = str_replace( 'Your Nav Text', '<i class="icon-example"><span>Example</span></i>', $menu );

    return $menu;

Replace ‘Home’ and the icon font code with what ever your navigation item is. Be sure to hide the span using one of these hiding techniques from CSS Tricks.

Leave a Reply

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

Tell us about your project.

We'd love to hear what you're working on.

Work with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.