Icons are not visible

You are here:
Estimated reading time: 1 min

The most common issue why the icons are hidden, is likely because of a CORS issue related to Rey’s SVG icon sprites and the CDN that is hosting it.

This problem is related to the fact that an SVG file (which inside has xml code) is linked from an external source (the CDN) and the browser blocks the svg sprite as a security measure.

The most obvious solution is to find if there’s any way to add a *.svg wildcard to exclude SVG files from being grabbed to the CDN. If you’re using a caching plugin with CDN setup, it’s likely it’ll have such option.

If the CDN is a hosting feature, try asking your hosting’s support if there’s any way to exclude .svg files. If there isn’t, i’m afraid the only way to show them is to disable CDN.

In case you’re wondering why i chose to use SVG icon sprites, it’s because it’s the most performant way of adding icons, and in fact a standard. However because they weren’t as supported in the past, the paradigm was to use font icons. Unfortunately they’re the worst solution because they’re monochrome and usually you need to load entire libraries of icons, maybe to just one 2-3 of them.

Solutions for various plugins:

Breeze: In the plugin’s settings look for CDN tab, and in the Exclude Content field, add .php,.svg eg: https://d.pr/i/2XMRJW .

WP Super Cache: In the plugin’s settings look for CDN tab, and in the Exclude if substring field, add .php,.svg eg: https://d.pr/i/HYyjdU .

WP Rocket: CDN tab > Exclude files from CDN and inside add *.svg eg: https://d.pr/i/skIthk .

BunnyCDN: https://d.pr/i/oV6uVl .

GoDaddy hosting. Some hosting packages from GoDaddy have a built-in CDN that unfortunately cannot exclude any file. The solution is to just disable CDN option in the hosting panel.

Was this article helpful?
Dislike 0
Views: 378

Join the conversation