3

How can we change the CSS rules of dingbats? The following does not work in iOS Safari.

<span class="dingbat">&#x2716;</span>

<style>
.dingbat {
    color: blue;
    font-size: 100px;
}
</style>

Below is a JSFiddle that demonstrates the issue. If you open the JSFiddle in a desktop browser, the dingbat X color will be blue and the size will be 100px. But if you open it in mobile Safari, the color will be black and the size will be small.

https://jsfiddle.net/ujs80tv1/2/

This question was marked as a possible duplicate of "Color of Unicode Emoji". I don't think this question is a duplicate, because I definitely can change the color of Unicode dingbats in most browsers (see JSFiddle for example). The only browser I am not able to change the color in is mobile Safari. You cannot change the color of emojis in any browser as far as I know.

The recommended answer in the "Color of Unicode Emoji" question says to use a new font or library. That may be a workaround, but it doesn't answer the question. If someone can prove that unicode dingbats cannot be styled in mobile Safari I would accept that as the correct answer.

Mitch Downey
  • 887
  • 1
  • 11
  • 15
  • span in between 2 p is not a valid HTML structure, give a try display:block for the span or use a p as well and see if it works fine .... i don not have the configuration where you have your issue,. **Could clarify as well if this happens only with dingbat or any fonts ?** – G-Cyrillus Mar 16 '16 at 18:18
  • Thanks @GCyrillus I updated the JSFiddle to use display: block on the .dingbat class. I am still not seeing the CSS rules apply in mobile Safari. The problem is only happening with dingbats. I can change normal fonts in mobile Safari just fine. – Mitch Downey Mar 16 '16 at 18:22
  • Possible duplicate of [Color for Unicode Emoji](http://stackoverflow.com/questions/32413731/color-for-unicode-emoji) – roeland Mar 17 '16 at 03:56

2 Answers2

6

A response in a similar post answers this. It worked for me!

HTML unicode arrow works on Safari desktop, but not Safari for iOS

font-family: 'Zapf Dingbats';
Community
  • 1
  • 1
Tom C
  • 76
  • 1
  • 3
  • This hack doesn't make any sense but it fixed the font-color for me. Thanks! I wouldn't even consider trying it out without your tip. – Boycott Russia Aug 29 '16 at 04:11
1

You cannot change the color of the default &#x2716 style. You have to first set a font to it. In the css just add font-family: "Times New Roman".

Allan
  • 82
  • 9