[Support request] How can I use icons with menu text

[Mohamed]

Hello,

How can I create a menu to be (icons + text) like the URL in the private info?

[Elvin]

Hi,

You can refer to this documentation on how to add icons.
https://docs.generatepress.com/article/adding-icons-to-menu-items/

Note: you can replace <i> icons with <svg> icons. Make sure you wrap your menu item text label with <span> too.

Example Navigation Label:

<i class="fa fa-home" aria-hidden="true"></i>
<span class="menu-text">Home</span>

or if you want SVG.

<svg> </svg>
<span class="menu-text">Home</span>

You then add this CSS:

/* Display menu item contents vertically center */
li.menu-item a{
	display:flex;
	flex-direction:column;
	text-align: center;
}
/* add border radius with top and bottom padding */
li.menu-item {
	border-radius: 20px;
	padding: 20px 0;
}

And then set the menu colors on Appearance > Customize > Colors > Primary Navigation.

[Author]

Posts