The Listify theme includes a built-in icon set with over 500 custom icons that can be added to various theme elements. One of the most common uses is to append icons to navigation menu items. These icons can be used in the Primary, Secondary, and Tertiary menu locations.

1. Choosing an Icon

Listify uses the Ionicons icon library. To choose an icon:

1. Visit the Ionicons v2 icon list.
2. Browse the available icons and select the one you’d like to use.
3. Copy the class name of your chosen icon — for example: ion-alert

2. Enable CSS Classes for Menu Items

WordPress does not display the CSS Class input by default in the menu editor. To enable it:

1. Go to Appearance > Menus in your WordPress dashboard.
2. Click on the Screen Options tab at the top-right corner of the screen.
3. Check the box for CSS Classes.

3. Add the Icon Class to a Menu Item

Now that CSS Classes are enabled, you can apply your icon:

1. Locate the menu item you want to customize under Appearance > Menus.
2. Click to expand it and look for the CSS Classes (optional) field.
3. Paste the icon class you copied earlier (e.g., ion-alert) into this field.
4. Save the menu.

This will automatically prepend the selected Ionicon to the menu item label on the frontend.

Tips

• You can combine icons with custom styling (e.g., spacing or color) by adding multiple CSS classes.
• Icons can enhance UX by visually indicating the purpose of menu items (e.g., login, dashboard, location).
• Used in the Tertiary Menu, icons can highlight important user dashboard sections or account features.

Further Reading

• WordPress Menu Management Guide