Developers and adblockers don’t mix

9 years ago

OK, call me dense. I had a problem: the new theme I have for this blog has cute little buttons for the social networks I belong to and use; they’re at the bottom of every page. Internally they use Font Awesome to deliver the individual icons. On my desktop browsers: no issue, they look great. On my iPhone? What. The. Heck.

Although you can pretty easily scroll to the bottom of the page to look at them, here’s what they are supposed to look like, this from a desktop browser:

So, four nicely colored buttons, one for Facebook, one for Twitter, one for StackExchange (for me, that’s mainly StackOverflow), and one for LinkedIn. Font Awesome is producing the icons, the theme’s CSS does the rest. Pretty simple stuff.

On my iPhone this was the result.

What the heck is going on here? Not all the icons are there, and the buttons are all messed up. Even worse the left chevron icon you can see in the “OLDER” button is also a Font Awesome icon. Oh man: some icons are showing and some are not? I flipped the phone to landscape: the same thing. I went back to Firefox on the desktop and shrunk the window – yes, it tested that responsive theme, but the buttons were exactly right. I switched to Chrome, went into the Developer Tools and selected the various iPhone options. Exactly right. I used my iPad: exactly right.

By this time I felt I was going nuts. Time for some googling. After a few visits to the aforementioned StackOverflow to read Q&A on versions of Font Awesome from two years ago, I finally hit upon the troubleshooting page on the Font Awesome GitHub site. Who’d a thunk? Under the “Some icons don’t show up” section, item 7 states baldly: “Check the following: Your browser's extensions are not blocking webfonts (noscript, adblockplus, etc.).”

Moments later, after a slap upside the head, I’d turned off my iPhone’s content blocker for Safari, and refreshed the page to see this:

So, in short, when you are writing a web page or a web app, you are a developer: make sure your test device is not hampered in some way by your normal usage of it. Although I’d have to say my content blocker (BlockBear) is being remarkably nit-picky (and obviously doesn’t view Stack Exchange as a nasty ad producer).