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>

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



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 Asp.net 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?