Archived topic
svg icons
3 replies · Started by Bernhard on October 11, 2020
Hello,
I want to pass from icomoon icon fonts to svg icons but I have not clear, how to use svg icons in the navigation. I think, I can insert the <svg> code into the navigation, something like <svg class="icon"><use xlink:href="#icon-home"></use></svg>. Is this correct? Then I have to define the icons in html. Using Elements, where shall I place it? Or is it better to refer to an external file?
Hi,
You can try this following this:
https://docs.generatepress.com/article/adding-icons-to-menu-items/
Note: replace any <i class="xxxx"></i> with your <svg>.
OK, I found the svg file is bigger than the icomoon font file. I think, at this point it's better to go ahead with the fonts. Furthermore, the svg icons were displayed upside down - see first row of the test page
Question: PageSpeed Insights asks to preload icomoon.ttf. I inserted a hook in wp_head with <link rel="preload" href="/fonts/icomoon.ttf" as="font"> but nothing changed.
Question: PageSpeed Insights asks to preload icomoon.ttf. I inserted a hook in wp_head with
<link rel="preload" href="/fonts/icomoon.ttf" as="font">but nothing changed.
Check if your href is correct. Make sure it is pointed to the font file URL.
You can do that by locally hosting your font.
You can try uploading it on media library with this guide. -https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font
After successfully uploading, get its file URL and paste it on the link tag's href.
