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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat 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.