How can we change the CSS rules of dingbats? The following does not work in iOS Safari.
<span class="dingbat">✖</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.
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';