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

Was this article helpful?
Dislike 0
Views: 29

Join the conversation