How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

Tags: html,css,unicode,mobile-safari,dingbats

Problem :

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

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

.dingbat {
    color: blue;
    font-size: 100px;

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.

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.

Solution :

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';

    CSS Howto..

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to have different input text styles in same html form?

    How do i convert a jqueryui theme to Theme

    how to add/remove a class from a link

    How do I make a textarea resize properly when I resize browser window?

    CSS: how to layout 3 columns, 2 are optional

    How to show/hide content based on a css class

    Image title both alingn. How to make each element aligned vertically?

    How to CSS sandbox/reset an entire DIV area in the current page?

    How add symbol in CSS for element?

    How to reduce css http requests?

    How can I make buttons flash different background colors when clicked/

    Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

    Jquery CSS How To Use Margin: 0 auto

    CSS - How do I get my list element to fill 100% of the block

    How to specify a CSS border on hover around thumbnails?

    How to apply SVG so that it works in IE background image

    How to make this Header/Content/Footer/Menu layout using CSS?

    How can I change the color of a DecoratorPanel in GWT?

    HTML/CSS: How to make web page stay put when resizing browser window?

    How to check image is visible (Webdriver)

    How to remove the blank between div.sons?

    How can i apply background-image to low div

    How to copy the html contents of one iframe to another iframe including CSS?

    How can I get these two widgets to align horizontally using CSS selectors?

    How to make an image display above the background of an :after element

    How to change tab key selection color with css? [duplicate]

    How do I Align The Border Of Text To An Image? (HTML/CSS) | (Extra [Answered]): How do I Fullscreen with Inspect? |

    Image won't show up html + css

    How to close this menu clicking outside?