Where did my icons go?

When I was experimenting with an SVG sprite to replace my current icon font, suddenly some of the icons disappeared without a clear reason. It worked fine when I accessed the demo page via the file URI scheme, but as soon as I used an HTTP server, some of them did not show up.

This puzzled me because I was using the (unmodified) demo page I downloaded from IcoMoon and more importantly: I had seen the icons when I used the file URI scheme.

After inspecting one of the icons, I saw that a user agent stylesheet had set the “display” property to “none” on that element (and a bunch of others):

I figured this must have been caused by one of my extensions. And indeed: after disabling the Adblock Plus extension the icons appeared again. Some more tweaking revealed that Fanboy’s Social Blocking List was the culprit. This immediately explained why only the social media icons were missing. (I had not made that connection yet…)

For me the solution was to just use a different class name for the social media icons. I can also disable the list on my machine, but that would only solve the problem for me. Visitors of the site might have the blocking list enabled and as a result not see some of the icons.