Archived topic
Replace “my account” link in main menu with an icon
7 replies · Started by Oliver on August 9, 2021
How can I replace the link text “my account” with an icon like Emerald, Décor and Aroma from the site library?
Hi there,
those sites are using a Block Element with the GenerateBlocks plugin Buttons block, that is used to add just the Icon and the link.
In the Block Element the Hook: generate_menu_bar_items is used to display it on the site.
If your current My Account item is a Menu Item, then the label field can accept HTML including an inline SVG, so you can replace the label with:
<svg aria-hidden="true" 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>
Which is the icon those sites are using.
David I replaced the My account label with the text you gave me and it worked. How can I keep the icon outside the menu on mobile and tablet view? just like the shopping cart icon appears left beside the hamburger menu?
Hi Oliver,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Hi Ying, no problem
How can I keep the icon outside the menu on mobile and tablet view?
Ah I see what you mean.
It has to be a menu bar item instead of a menu item.
So you need to create a block element with the account icon. Here's the documentation with a tutorial video:
https://docs.generatepress.com/article/generate_menu_bar_items/
In this video, Leo introduced 2 methods: Hookand block element - hook.
If you are familiar with HTML, you can use the Hookelement. If not, then block element is a better choice.
Let me know if this helps :)
Perfect! Thank you very much and have a nice day!
Glad to hear that and you are welcome :)