Archived topic

Use GP SVG Icon for custom menu item

9 replies · Started by Jim on July 9, 2019

Viewing posts 1–10 of 10

July 9, 2019 at 4:09 am #952750

Hi. So I test my site with GTmetrix and saw the woff2 font is showing up (today) on single posts despite choosing SVG in the general settings in the customizer. Check the waterfall if you need to confirm. How to disable this?

July 9, 2019 at 7:22 am #952880

Hi there,

its because of the custom menu item you have added the slideout toggle to, it will call the font not the SVG.

July 9, 2019 at 12:19 pm #953278

Aha. Makes sense. How do I replace that with SVG?

July 9, 2019 at 1:36 pm #953316

You could do something like this:

Create a new custom menu item.
Give it a custom class eg. custom-toggle
Add this is as your menu item label:

<span class="gp-icon icon-menu-bars"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
<path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path>
</svg>
</span>

Then use this CSS to hide the dropdown toggle icon for the sub menu:

.custom-toggle .dropdown-menu-toggle {
    display: none !important;
}

July 9, 2019 at 4:42 pm #953449

Thanks. It worked. ~~How do I centre-align the icon? It seems with the removal of the dropdown icon the hamburger icon shifts to the left.~~

Figured it out. padding-right:20px.

July 9, 2019 at 4:58 pm #953455

Glad to be of help.

July 9, 2019 at 5:06 pm #953459

Hi David. Checked again with gtmetrix and the font is still loading.

July 9, 2019 at 5:30 pm #953467

Try clearing your caches - the CSS for some of the icon fonts is still be called from cached CSS.

July 10, 2019 at 3:04 am #953760

This is very strange because even before posting the previous comment, I flushed all cache (Litespeed cache) and I have done so several times even at the server level but the font is still showing. It goes away if I deactivate the plugin.

Update: Solved by deleting the cache folder via FTP.

July 10, 2019 at 7:06 am #953917

Caches can be a right pain sometimes. Glad to hear you got it resolved.

This archived topic is closed to new replies.

Start building better websites today.