PRO 1.1.1 icons for menu?

Downloaded pro a few days ago. On pro’s sample menu, they have different icons. When I put in my menu, the icons are all the same. I don’t see where to change the icons, only the dropdown icon. Can anyone explain where to go?

Had this same problem today - you can correct that in the Appearance > Menus - make sure your CSS Classes option is turned on in your screen options. You will then see the Icon Primary and Icon Secondary. You will be able to change it there.

Adding icons to menus is a 2-step process. You first need to enable a graphic in the menu > top links setting. Then you will need to set the icon you want in the WP menu editor. You’ll notice new fields in the menu item config for icon/image primary and secondary. If you want to use an icon set it in the icon field. Primary is for the normal state, secondary is for the hover state. The icons are just listed by name and don’t have the icon shown. The image field is used if setting an image instead of a icon. You’ll need to provide a path to the image you want to use.

This makes some sense, but what if i want some menu-links have icons and some without?

As for my case, in my clients menu he wants to add the instagram logo before the link. That´s it. Sure i can fix this using CSS, no problem. But i think this should be a core feature to be able to select “no icon”.

Please.

EDIT! @kevinb, this reply was not intended to be adressed directly to you ofcourse. :smile: But more to the staff.

1 Like

In that case you could try a few different things. You could set all the other icons to display:none with css. I don’t remember if FA includes a “blank” icon, but if it does, set it to that. Using css, set the others to the same color as your background (if using a solid bg). Lastly, you could add the Instagram link in a second menu or use the social element. This would mean creating a second mobile-only menu if you plan on using the off canvas nav element for mobile.

There seems plenty of room for these little improvements in Pro that will hopefully be addressed in the future.

Yeah, i had to go with using a little CSS tweak. I simply set :before elements on nav-links have display:none; and added a custom class to the instagram link where :before element have display: initial;

But still, having a “blank” or “none” option in the list of icons would really make it easier. FA doesn’t have a “blank” icon. :slight_smile:

  • pokes Theme Co staff :heart: *

/E

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.