Developers and adblockers don’t mix

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:

Social Network Buttons in Firefox

Social buttons

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.

Social buttons in iPhone Safari

Antisocial buttons

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:

Social buttons now working

Social again

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

CSS is awesome!

Album cover for VoicesNow playing:
Vangelis - Ask the Mountains
(from Voices)

Loading similar posts...   Loading links to posts on similar topics...

1 Response

julian m bucknall avatar
#1 julian m bucknall said...
20-Jan-16 10:35 PM

Update: Crazy time. I was considering writing some JavaScript to fiddle around with these buttons, but after more investigation, it turns out that all the content blocker was complaining about was the icons. Not the links or anything else, but the icons as defined by their class names (fa-twitter and the like). I fixed it by adding the following to my CSS:

.fa-juliantw:before { 
    content: "\f099"; /* twitter icon */
.fa-julianfb:before { 
    content: "\f09a"; /* facebook icon */
.fa-julianli:before { 
    content: "\f0e1"; /* linkedin icon */

which basically replicated the icon Unicode character numbers under other class names. Then it was a moment's work to change the <i> elements to use these new classes. Problem solved with nary any JavaScript code in sight.

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response