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 Prevent Opacity for Sub Div using Jquery

    How to include PHP code in CSS?

    How to simplify cross-browsing css animation keyframe?

    How to access this element with CSS

    How do I select every other div class element using just CSS (no js)

    How to selectively load/use CSS for YUI modules?

    How to handle an image inside bootstrap column?

    How to include Glyphicons without using Bootstrap CSS

    How to change css for each additional innerHTML element in a javascript for loop

    How to write variable with multiple css properties in Sass

    How to display a division over other element

    How to create a border that does't add a margin?

    How to == Model Method Class in Helper for CSS?

    How to send CSS to the client using HTTP response headers?

    How can I force Visual Studio to follow a custom CSS template when I edit my css files?

    How can I use AngularJS directive to apply css style for a string?

    How to pass array from method to property using PHP

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to resize div with CSS by the border

    How do I create triangle shaped vertical breadcrumbs

    How prevent Conflict between two $(this) in jquery?

    How to remove inline css with jQuery onClick [closed]

    how change active class on a listItem using jquery

    How do I get text in my html page to display features using the css stylesheet?

    How can I resize to fit html elements horizontally using CSS?

    How to free a paragraph from its CSS style?

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to make a bullet list align with text in css?

    How determine what CSS selector to use from my HTML source code?

    How to properly set the 100% DIV height to match document/window height?