[Resolved] Menu Icons Plugin Using woff2 instead of SVG

[Oisin]

Hi Leo,

Thanks for your help with this one. I really need to get it fixed. I recently changed the content of the menu label to this <img src="wp-content/uploads/2019/11/Load-Labz-Facebook.svg" alt="Load Labz Facebook Profile">. If you hover your cursor just to the right of “CONTACT” in my primary nav you can see actually click through to my Facebook profile, it’s just the icon will not appear.

I actually think the icon might be there but can’t be seen because it is black. When I loaded the icon using the menu-icons plugin it was automatically loaded in a white fill. I assume it was picking up on the CSS rules for the rest of the menu. Now that I’m loading it as an image it is not picking up any CSS to change it to white.

Do you think this is correct and is there some trick I can use to change this within the menu label?

***Update*** I tried edited the pathfill within the SVG file to #ffffff which changed the icon to white but it’s still not showing in my primary nav for some reason. Are you sure the menu label can handle an svg loaded this way?

Many thanks,

Johnny.

[Leo]

What happens if you disable lazy load?

And is this done?
https://docs.generatepress.com/article/adding-svg-logo/#allowing-wordpress-to-upload-svg-files

[Oisin]

Hi Leo,

I don’t have lazy load enabled. No, I’m not sure what the CSS class is for that icon. I’ll have a play around with it now.

Johnny.

[David]

If the SVG is loaded as an <img> you cannot style it with CSS. It has to be inline.
Easiest way to do this is use the Support SVG plugin to add WP SVG support:

https://en-gb.wordpress.org/plugins/svg-support/

and enable its advanced mode. Then you include their style-svg class:

<img class="style-svg" alt="alt-text" src="image-source.svg" />

This will inline the SVG which will allow the fill property and other styles to be applied.

[Oisin]

Thanks David, I’ll try that now.

[David]

The SVG method above is what i had in mind.
Worth the few extra steps if performance is the main objective as it eliminates the additional request for the font.

[Oisin]

Cheers David, for some reason I thought it was more complicated when I first read it. It’s pretty straight forward. Thanks very much for your help.

[David]

Glad to be of help.

[Oisin]

Hi David,

One last bit of help needed. I have the SVG in place but it didn’t pick up any styling so I tried targeting it with the following as a test:

.menu-item menu-item-type-custom menu-item-object-custom menu-item-1220 {
height: 20px;
width: 20px;
}

I’m sure I’m missing something obvious so any advice much appreciated.

Thanks,

Johnny.

[David]

Looks like you’re missing some . on your CSS selectors and you want to target the svg inside the menu item so this:

.menu-item menu-item-type-custom menu-item-object-custom menu-item-1220

should be:

.menu-item .menu-item-type-custom .menu-item-object-custom .menu-item-1220 svg

If thats not working then link me to the site and i can take a look.

You may want to look into add CSS classes to menu items – will save a lot of hassle:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Oisin]

Cheers David,

I added a class to both the Facebook and Twitter icons there .svg-menu-icon using the method you linked. I then used that to target the icons in the additional CSS customizer. That worked a treat, I can see that the CSS is being picked up. Thanks for the tip! For some reason the icons aren’t displaying still.

My website is loadlabz.com – really appreciate you taking a look. You can see how it’s supposed to look by visiting testinglabz.com

Warm regards,

Johnny.

[David]

Need to target the svg element like so:

.svg-menu-icon svg {
	height: 20px;
	width: 20px;
	fill: #ffffff;
}

[Oisin]

A rookie mistake. Thanks for all your help, everything is looking great now.

[David]

Glad to be of help 🙂

[Oisin]

***Edit*** Fixed it

[Author]

Posts