[Resolved] Menu Icons Plugin Using woff2 instead of SVG

Home Forums Support Menu Icons Plugin Using woff2 instead of SVG

This topic contains 30 replies, has 3 voices, and was last updated by  David 1 week, 3 days ago.

Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #1054195

    Johnny

    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.

    #1054318

    Leo Customer Support
    #1054498

    Johnny

    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.

    #1054661

    David Customer Support

    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.

    #1055120

    Johnny

    Thanks David, I’ll try that now.

    #1055137

    David Customer Support

    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.

    #1055150

    Johnny

    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.

    #1055156

    David Customer Support
    #1055201

    Johnny

    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.

    #1055386

    David Customer Support

    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

    #1055713

    Johnny

    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.

    #1055737

    David Customer Support

    Need to target the svg element like so:

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

    Johnny

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

    #1055842

    David Customer Support

    Glad to be of help 🙂

    #1057091

    Johnny

    ***Edit*** Fixed it

Viewing 15 posts - 16 through 30 (of 31 total)

You must be logged in to reply to this topic.