Archived topic
Menu with icon and submenu
3 replies · Started by Maik on September 1, 2021
Hi.
I want to setup a mainmenu-item with just a icon (without any text) and a functional submenu below. In my case I want a user-icon for "my-account" and some submenu-items for "reset-password" and "orders".
I´ve seen all the solutions from fontawesome, custom elements and button-items for using an icon as menu-item. But I don´t see any solution for a functional submenu. I think it would be the easiest way to use the normal menu with a custom class (like fontawesome) to replace the text with an icon, right?
It also would be great, if I can use an icon from the (generate-blocks) svg-icon-library. Do you have an idea how to achieve this or can you push me in the right direction?
Thanks a lot
... and also for this great theme, love it more and more. :)
Hi there,
whichever method you add the icon to a menu item, you can still add sub menu items below it, its no different to having the standard text :)
A simple method is to copy the SVG HTML like that is used in GenerateBlocks, and paste that directly into the Menus Navigation Label Field. Heres the HTML that GB uses for its user icon:
<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path></svg>
Hi David.
Well... that was to easy. Thanks for this solution and helping me out.
Best
Maik
Glad to be of help
