Icons on menu items
Add an icon to any menu item in Appearance > Menus, choose the icon type, and set its position, size and label.
Reign has icon support for menus built in. You can put an icon before or after the text of any menu item, or show the icon alone.
You do not need the separate Menu Icons plugin. If you activate it, Reign turns it off and shows a notice, because the two cannot run together.
Add an icon to a menu item
- Go to Appearance > Menus and open the menu you want to change.
- Open a menu item by selecting its arrow.
- Next to Icon:, select Select.
- In the Select Icon window, pick an icon. Use the type tabs and the All filter to browse.
- Adjust the settings in the side panel (see below). The Preview shows the result.
- Select Select to confirm, then select Save Menu.
To change an icon, select it next to Icon: and pick another. To take an icon off, select Remove.
New items added from the BuddyPress menu box come with a matching icon already chosen, such as a bell for notifications.
Icon settings
These settings belong to each menu item. They appear in the side panel after you pick an icon.
| Setting | Default | What it does |
|---|---|---|
| Hide Label | No | Yes hides the item’s text visually, so only the icon shows. Screen readers still read it. |
| Position | Before | Before puts the icon ahead of the text. After puts it behind. |
| Vertical Align | Middle | Lines the icon up against the text: Super, Top, Text Top, Middle, Baseline, Text Bottom, Bottom or Sub. |
| Font Size | 20 (px) | Size of the icon. Shown for font icon types only. |
| SVG Width | 1 (em) | Width of the icon. Shown for the SVG type only. |
| Image Size | thumbnail | Which WordPress image size to use. Shown for the Image type only. |
Settings that do not apply to the chosen type are not shown. Vertical Align, Position and Hide Label apply to every type.
Icon types
Reign offers these icon types:
| Type | What it is |
|---|---|
| Reign | Reign’s built-in icon set, in groups such as Brand, Directional, Charts, Currency and Web Application. |
| Dashicons | The icons used in the WordPress admin. |
| Elusive | The Elusive icon font. |
| Foundation | The Foundation icon font. |
| Genericons | The Genericons icon font. |
| Image | Any image from your Media Library. |
| SVG | An SVG file from your Media Library. |
Only Reign is on by default. To turn others on:
- In Appearance > Menus, open an item and select Select next to Icon:.
- In the side panel, find Icon Types Available.
- Tick the types you want and select Load Icon Types.
The page reloads and the new types appear as tabs in the picker. Select Reset in the same panel to go back to the default.
Which menus show icons
Icons show in every menu location you assign a menu to. Reign registers these locations, set under Appearance > Menus > Manage Locations:
- Primary - Logged in users
- Primary - Logged out users
- Left Panel - Logged in users
- Left Panel - Logged out users
- Mobile Menu - Logged in
- Mobile Menu - Logged out
- User Profile
The two Left Panel locations are icon-only, so any item there without an icon of its own gets a generic link icon. Other locations show no icon for items you left blank. See Left panel and Mobile menu.