OK, I’ve now got round to investigating this myself.
Findings
Some devices don’t show the icons properly, in particular iOS 4 & 5 (and remember, some iDevices that are only a few years old can never be upgraded to iOS6 yet they’ll be around for a while).
Two symbol fonts are used: entypo and genericons.
The following symbols are used in Customizr and don’t work on iOS 4/5:
- entypo “\1F4C4” (page symbol; article.page)
- entypo “\1F504” (circular arrows; article.format-aside)
- entypo “\1F3AC” (video symbol; article.format-video; can’t test, as there isn’t one on demo.themesandco.com, but I suspect it won’t)
- entypo “\1F304” (photo symbol; article.format-gallery)
- entypo “\1F517” (chain/link symbol; article.format-link)
The following work on OSX ML / iOS4/5/6 / Ubuntu12:
- entypo “\26A1” (lightning; article.format-status)
- entypo “\275E” (quotes; article.format-quote and article.error404)
- genericons “\f411” (pen symbol; article.format-standard)
- genericons “\f108” (speak bubbles; article.format-chat)
- genericons “\f109” (audio symbol; article.format-audio)
So, in summary, entypo breaks–almost–every time on iOS 4 & 5. The only time it doesn’t break is when the underlying Unicode character is the same as the entypo character. Specifically, the lightning symbol and the quotes symbol both use the correct Unicode character, so when the browsers are unable to show the entypo character, they can at least show the underlying character from a substitute/default font. All the above 1F… series characters break, but other nearby 1F… characters work, so that’s not a common thread.
So what can I conclude from this?
ell, that entypo doesn’t work on some devices. Whether this is the theme implementation or a problem with the font, I don’t have the knowledge to say.
What to do?
Personally, for now or until the theme gets it right, I’m just going to switch the whole lot off, with:
.format-icon:before {
display: none;
}
.entry-summary.format-icon:before,
.entry-content.format-icon:before,
article.page .format-icon:before,
article.format-standard .format-icon:before,
article.format-gallery .format-icon:before,
article.format-aside .format-icon:before,
article.format-chat .format-icon:before,
article.format-audio .format-icon:before,
article.format-video .format-icon:before,
article.format-status .format-icon:before,
article.format-quote .format-icon:before,
article.error404 .format-icon:before,
article.format-image .format-icon:before,
article.format-link .format-icon:before {
display: none;
}
Later I may selectively switch them back on by removing them from the list above and using simpler characters that I know will work. For example, a “page not found” error looks fine with an exclamation mark :
article.error404 .format-icon:before {
content: "!";
}
I’m sure I’ll get more creative in future.
Hope this helps others fix their problems.