[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 - 1 through 15 (of 31 total)
  • Author
    Posts
  • #1039212

    Johnny

    Hi there,

    I am getting the Ensure text remains visible during webfont load message for my website in PageSpeed Insights. I have set all icons to load as SVG in the theme settings. Am I missing a trick here?

    Thanks,

    Johnny.

    #1039222

    David Customer Support

    Hi there,

    the SVG Icons in GP only apply to those built into the Theme. It doesn’t apply to any that are loaded via another plugin.

    #1040538

    Johnny

    Ah yes, it’s coming from the menu-icons plugin: /wp-content/plugins/menu-icons/vendor/codeinwp/icon-picker/css/types/fontawesome-webfont.woff2?v=4.7.0

    I can’t see any @font-face rule in there to add font-display: swap; I assume this is because icons are being loaded but I’m not sure. Is there some way to add swap or maybe some other technique to remove the “Ensure text remains visible during webfont load” diagnostic message?

    #1040578

    David Customer Support

    Not unless the plugin author included a filter for that which i would doubt.
    Personally would be better to look at an SVG solution to display the icons, instead of loading the entire FA icon library for a couple of menu icons.

    The menu item label supports HTML so you can add an img / svg directly to the label.

    #1040591

    Johnny

    Cheers David,

    Really appreciate the advice. I’m not much a developer and still learning. Is the type of change that requires me to set up a child theme or can I use the additional CSS field?

    I found this article that seems to deal with the issue – http://eoinodwyer.com/blog/svg/adding-svg-icons-to-the-wordpress-menu/ – is this the type of thing that will work?

    #1040704

    Leo Customer Support

    No child theme needed for svg as David mentioned that

    The menu item label supports HTML so you can add an img / svg directly to the label.

    #1051157

    Johnny

    Thanks Leo, is there something I can follow in the documentation to implement this? Is it easy to do?

    #1051182

    Johnny
    #1051481

    Leo Customer Support

    To use SVG? If so you can just add the image tag in the menu label field:
    https://www.w3schools.com/tags/tag_img.asp

    #1051492

    Johnny

    Thanks Leo,

    I tried adding a test SVG for the Facebook icon in the primary nav. Do you have any idea why it’s not working? It’s coming back with a 404 error.

    I added this to the navigation label – <(img src=”https://www.mywebsite.com/wp-content/uploads/2019/11/facebook-f-brands.svg” alt=”Facebook Profile” )/>

    ***Disregard the brackets***

    #1051573

    Leo Customer Support

    I’m not seeing this in your live site?

    #1052279

    Johnny

    That was just an example just to make sure I added the tag correctly. My website is Loadlabz.com

    #1052301

    Leo Customer Support

    Which menu item has the svg added?

    #1054187

    Johnny

    To the right of the contact link in the primary nav there should be a Facebook SVG

    #1054190

    Leo Customer Support

    Not seeing it in the HTML.

    Can you copy and paste the code you’ve added in the menu label?

    Make sure to highlight it and click and code button in the editor here.

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.