Site logo

Archived topic

Replace “my account” link in main menu with an icon

7 replies · Started by Oliver on August 9, 2021

Viewing posts 1–8 of 8

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 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 :)

This archived topic is closed to new replies.