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

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

Home Forums Support How can I use icons with menu text

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1543260
    Mohamed

    Hello,

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

    #1543275
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.