[Support request] Use SVG icons for menu items

[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?

[David]

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.

[Angel]

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

[Elvin]

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;
}

[Angel]

Thanks!

[Elvin]

No problem. 🙂

[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!

[David]

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 ?

[Craig]

CSS to center logos for the secondary menu.

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

[Author]

Posts