I would like to know if there is a way to use the .woff2 version of the icon font file rather than the .ttf that is used now. As shown in the attached screenshot from Gtmetrix, the .ttf icon file is the largest of my whole website and I would like to use the smaller version to improve load speed.
Would it be possible to use the .svg file instead? I’m still getting a slow loading icon with .woff despite preloading it. I assume the code would be different?
Sorry to bother you again. It's good using the .svg file as it removes the "ensure text remains visible during webfont load" error and improves load time, but it also removes the navigational arrow icons on desktop for some reason. They're ok on mobile (see attached screenshots).
Hmm. I am not sure if you already figured it out? Because the navigation arrows are displaying properly here on my end (Chrome on Windows 10 - PC). Please see this screenshot: https://share.getcloudapp.com/wbuwGoR8
hmmm that is strange because I’ve just looked and I’m still seeing the squares on chrome and edge both on Mac and pc. I’ve cleared the cache and am still getting them.
I am sorry, but I honestly have no idea why in this case. I would suggest finding more information on Google with the keywords like "svg icon not showing in firefox".
Hello,
I would like to know if there is a way to use the .woff2 version of the icon font file rather than the .ttf that is used now. As shown in the attached screenshot from Gtmetrix, the .ttf icon file is the largest of my whole website and I would like to use the smaller version to improve load speed.
Thanks in advance,
Jade
Hi Jade,
In the "/css/ionicons.min.css" file, I believe we can change the code from:
@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.eot?v=2.0.0");src:url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"),url("../fonts/ionicons.woff?v=2.0.0") format("woff"),url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");font-weight:normal;font-style:normal}to:
@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.woff?v=2.0.0") format("woff");font-weight:normal;font-style:normal}And it should then use the .woff instead.
I hope this helps!
Thanks! That worked a treat :)
Hello again Paul,
Would it be possible to use the .svg file instead? I’m still getting a slow loading icon with .woff despite preloading it. I assume the code would be different?
Ta,
Jade
Sure! It should be like this for loading the SVG file instead:
@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");font-weight:normal;font-style:normal}Thanks so much!
Hi Paul,
Sorry to bother you again. It's good using the .svg file as it removes the "ensure text remains visible during webfont load" error and improves load time, but it also removes the navigational arrow icons on desktop for some reason. They're ok on mobile (see attached screenshots).
Thanks,
Hmm. I am not sure if you already figured it out? Because the navigation arrows are displaying properly here on my end (Chrome on Windows 10 - PC). Please see this screenshot: https://share.getcloudapp.com/wbuwGoR8
hmmm that is strange because I’ve just looked and I’m still seeing the squares on chrome and edge both on Mac and pc. I’ve cleared the cache and am still getting them.
Hi Paul,
Are you still seeing the navigation arrows on desktop? Because I've still got squares. Any idea what might be happening?
Cheers,
Jade
I have tested opening this web page: https://www.destille.art/35mm/autumn-1-tmax-400/ on Chrome, Firefox, Opera, and Edge browsers. The arrows are displaying fine on most browsers except Firefox. It shows the arrow as a square like this: https://share.getcloudapp.com/yAuDpzJv
I am sorry, but I honestly have no idea why in this case. I would suggest finding more information on Google with the keywords like "svg icon not showing in firefox".
thanks for testing it out on your end Paul. I’ll check it out.
Is there a way to remove the arrow icons so that just the text remains as the navigational link?
It is such a mystery as to why they are not showing on chrome, edge and firefox, but they come up fine in safari.
Yes, you can use this CSS to hide the arrow:
.nav-title-icon-wrapper { opacity: 0; }That worked a treat on the posts. Thank you Paul.
Is there code to remove the navigation arrows at the bottom of the homepage as well?
Sure! Here it is:
.next.page-numbers { display: none; }Thanks!
And for the previous page arrow? I tried the code below but it didn't work
.previous.page-numbers { display: none; }
Sorry, I forgot that one! Please use:
.prev.page-numbers { display: none; }Thanks!