How to put icon on the menu

You can add font awesome icon class to menu item from Appearance > Menus

Normally the advanced properties are hidden and can be shown from ‘Screen Options’ slider on the top right of the window.

For Example:
You can add ‘fa fa-user’ (without quotes) as a class for any menu item.

Complete list of icons here

Hope this helps

Can we put a logo instead?

I’ve had some problems with icons not appearing but I found out how it’s done:

1. Appearance – Menus – Menu Settings – Theme locations – Tick the box for “Navigation Menu” – Save Menu

2. Screen Options – Tick the box for “CSS Classes”

3. Menu Structure – Expand one of your menus – CSS Classes (optional) – Add “fa fa-user” (without quotes) – Save Menu

Just use the link Rajesh provided for the icons. If you like to use copy/paste just remember to add an extra fa at the beginning to make it work.

EDIT: Flat theme supports Font Awesome up to v4.0.3 so not all of the icons are working.

We have supported Font Awesome 4.1.0 on the latest version of Flat (1.3.8)

Cool cool.

An issue related to the usage of icons: If I select the option for “Navigation Menu” then I’m able to use icons but I can’t use the parent page function. It comes up as a seperate menu item instead of linked to the parent. And if I deselect “Navigation Menu” the parent page works but not the icons.

Example:
https://www.yoarts.com/ – “Navigation Menu” selected.
https://odlainne.se/ – “Navigation Menu” deselected.

Is there a way to fix this?

Thanks.