How to put an icon font item in a nav menu item?

sage
1

I’m using font awesome but actually it would be the same procedure for the default glyphicons I guess - How would I add an Icon font item to a menu item?

What I want to achieve is to put social icon font links in the main nav menu.

One way I figured would be to define a class or id in less and add it to the menu item’s CSS, but perhaps there is a better, more straight forward way?

2

This is all a matter of personal preference. You can use LESS, you can add the markup directly to the menu item’s title, add the classes to the menu item (this doesn’t work well with the default nav, tabs or pills) or you can edit the nav walker to add the markup using the menu item’s “description” in the dashboard.

1 Like
3

Thanks Foxaii, that was easier than expected!

4

If you are using Font-awsome add

if (!empty($item->description)) {
		$item_html = preg_replace('/<a(.*)>/U', '<a $1 >' . '<i class="' . $item->description . '"></i>', $item_html); 
}

in lib/nav.php

on line 36

5

What is the latest way to do this? I tried chrillep’s suggestion and it doesn’t work (I’m on Roots 8).

I’ve registered a new theme menu location and added it to the footer, but I can’t figure out how to make the menu items show as font awesome icons instead of text. Any help is appreciated.

6

You can still do what @Foxaii suggested and add the markup directly to the title.

7

Didn’t realize that field accepted html. Thanks!

8

I got Font Awesome to work fairly easily with classes in the WordPress menu (i.e. fa fa-lg fa-facebook) but only the text is clickable. Which line do you add this to if you are using lib/wp-bootstrap-navwalker.php? I attempted to add it after the // End if() on line 147 but while it didn’t cause errors, it didn’t work.

9

I use Menu-Icons for this. It supports major icon fonts, SVG, and custom fonts created with Fontello.

1 Like
10

If you’re using ACF Pro, v5.6.0 introduced the menu location and is pretty easy to filter.

2 Likes