Adding Icons To Menu Items

You can easily add icons to your menu items if you wish. Simply use the Total font_awesome shortcode inside the label with the name of your font awesome icon of choice. Please see the example below taken from the Noveau demo.

Example Code:

[font_awesome icon="twitter"]

total-theme-menu-icons

You can find a list of the icon class names at FontAwesome.

Icons Without Text – Removing Extra Margin

By default all icons added to the menu have a margin to the right to leave space for any text next to it. However, if you have a menu item that is ONLY an icon without any text it will leave extra space for no reason. To remove this space simply add the “no-icon-margin” to the menu item as shown below:

You Don’t See The CSS Classes Field? This is disabled by default in WordPress, simply click on “screen options” in the upper right hand of the menu dashboard to enable it.