- This topic has 30 replies, 3 voices, and was last updated 2 years ago by David.
October 19, 2019 at 1:56 pm #1039212Oisin
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?
Johnny.October 19, 2019 at 2:21 pm #1039222DavidStaffCustomer SupportOctober 21, 2019 at 10:22 am #1040538Oisin
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?October 21, 2019 at 11:01 am #1040578DavidStaffCustomer 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.October 21, 2019 at 11:19 am #1040591Oisin
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?October 21, 2019 at 1:41 pm #1040704LeoStaffCustomer SupportNovember 2, 2019 at 5:01 am #1051157Oisin
Thanks Leo, is there something I can follow in the documentation to implement this? Is it easy to do?November 2, 2019 at 5:34 am #1051182Oisin
Think I found it here – https://docs.generatepress.com/article/adding-icons-to-menu-items/November 2, 2019 at 9:50 am #1051481LeoStaffCustomer SupportNovember 2, 2019 at 10:05 am #1051492Oisin
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***November 2, 2019 at 1:18 pm #1051573LeoStaffCustomer SupportNovember 3, 2019 at 11:31 am #1052279Oisin
That was just an example just to make sure I added the tag correctly. My website is Loadlabz.comNovember 3, 2019 at 11:55 am #1052301LeoStaffCustomer SupportNovember 5, 2019 at 11:17 am #1054187Oisin
To the right of the contact link in the primary nav there should be a Facebook SVGNovember 5, 2019 at 11:24 am #1054190
- You must be logged in to reply to this topic.