[Support request] Use SVG icons for menu items

Home Forums Support [Support request] Use SVG icons for menu items

Home Forums Support Use SVG icons for menu items

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1446888
    Junior Gong

    Hey guys

    I am planning to implement custom icons into our navigation
    I checked the tutorial, but it only covers how to use FA5 icons in menu items
    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    What’s the best way to add custom SVG icons to menu items?

    #1447040
    David
    Staff
    Customer Support

    Hi there,

    the Menu item label field supports HTML and over markup including <SVG> so the simplest method would be to add your <SVG> code inline within the menu label field.

    #1803849
    Angel

    Hey,
    can you tell me what would the code look like exactly?
    Thanks!

    #1803911
    Elvin
    Staff
    Customer Support

    Hi Angel,

    Say, for example, you have an airplane SVG you want to place on a menu item:

    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plane" class="svg-inline--fa fa-plane fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M480 192H365.71L260.61 8.06A16.014 16.014 0 0 0 246.71 0h-65.5c-10.63 0-18.3 10.17-15.38 20.39L214.86 192H112l-43.2-57.6c-3.02-4.03-7.77-6.4-12.8-6.4H16.01C5.6 128-2.04 137.78.49 147.88L32 256 .49 364.12C-2.04 374.22 5.6 384 16.01 384H56c5.04 0 9.78-2.37 12.8-6.4L112 320h102.86l-49.03 171.6c-2.92 10.22 4.75 20.4 15.38 20.4h65.5c5.74 0 11.04-3.08 13.89-8.06L365.71 320H480c35.35 0 96-28.65 96-64s-60.65-64-96-64z"></path></svg>

    Here’s what David meant by adding an inline svg:
    https://share.getcloudapp.com/rRujXWO2

    You then add this CSS so the icon is lined up with the text.

    .main-navigation .main-nav ul li.menu-item > a {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

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

    #1806863
    Angel

    Thanks!

    #1806946
    Elvin
    Staff
    Customer Support

    No problem. 🙂

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

    #1818340
    Rekindle

    Hi Elvin,

    I’m trying to do this but the SVG icon and the text appear on the same horizontal line. I’ve tried a few different options:

    1. <svg xmlns=”http://www.w3.org/2000/svg&#8221; height=”36px” viewBox=”0 0 24 24″ width=”36px” fill=”#452bc2″><path d=”M0 0h24v24H0V0z” fill=”none”/><path d=”M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z”/></svg>TODAY

    2.

    <svg xmlns=”http://www.w3.org/2000/svg&#8221; height=”36px” viewBox=”0 0 24 24″ width=”36px” fill=”#452bc2″><path d=”M0 0h24v24H0V0z” fill=”none”/><path d=”M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z”/></svg>
    TODAY

    3. <svg xmlns=”http://www.w3.org/2000/svg&#8221; height=”36px” viewBox=”0 0 24 24″ width=”36px” fill=”#452bc2″><path d=”M0 0h24v24H0V0z” fill=”none”/><path d=”M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z”/></svg><br>TODAY

    The last one creates an ugly horizontal space between the two elements that messes up items that have sub-items.

    How can I do this? Thanks!

    #1818614
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new topic where you can share a link to a page where we can see the icons and the issues ?

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