[Support request] svg icons

Home Forums Support [Support request] svg icons

Home Forums Support svg icons

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1483879
    Bernhard

    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?

    #1483883
    Elvin
    Staff
    Customer Support

    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>.

    #1485144
    Bernhard

    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.

    #1485673
    Elvin
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.