CSS style color uneffective on star character (★) on Samsung with Android 4.4 KitKat

Question

On my dedicated mobile website, I use the html star character ★ ★ and I apply CSS on it, especially color.

<span class="orange">&#9733; &#9733; &#9733;</span>
<span class="grey">&#9733; &#9733;</span>

.orange {
    color: orange:
}

.grey {
    color: grey;
}

Everything works well on most browsers and os, like this:

But on Samsung devices with Android 4.4 kitkat (Galaxy S4, S5...), the stars are natively styled by touchwiz (I suppose) and the color property has no effect anymore on stock browser and Chrome, but not Firefox ! And it works well on other kitkat (LG G2, Nexus 7) or Samsung with Jelly Bean.

I tried webkit specific style like -webkit-text-fill-color, with no effect.

I looked for all webkit style, but nothing seems to correspond except -webkit-text-fill-color.

I know others way to make stars like images, custom font-face or even CSS shapes, but simpler would be better.

So, have you ever seen that and found the magic style that works ?

Thanks.

Answer 1

I found what the problem was. It’s inside the fonts of the system, in this file exactly :

/system/fonts/NotoColorEmoji.ttf

By changing this font (Samsung emoji) with another with native Android emoji, the stars appear normally. I found the method here : XDA - [MOD] Emoji iOS / Google on Samsung S4 Kit Kat.

So it’s not possible to tweak Samsung stars directly.

Since I have multiple colors and sizes stars, work in responsive design and need to manage retina and others HD displays, image were too onerous to implement.

I tried CSS shapes, but as I play with different sizes in responsive design (changing root font-size in em modifies the whole page), something accurate in one size, was not in another.

So I used font-face.
On Icomoon, I picked the star and made a custom font. I put the correct style and that’s it ! I can apply css like I want.

The code looks like this :

HTML :

<span class="icon-star"></span>

CSS :

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?4n7iw5');
    src:url('fonts/icomoon.eot?#iefix4n7iw5') format('embedded-opentype'),
        url('fonts/icomoon.woff?4n7iw5') format('woff'),
        url('fonts/icomoon.ttf?4n7iw5') format('truetype'),
        url('fonts/icomoon.svg?4n7iw5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-star:before {
    content: "\e600";
}

Answer 2

I know this was asked 3 years ago, but I recently ran into the same issue. One way is to use the css shadow hack Credit goes to Tigran for the original solution:

.orange {
  color: transparent;  
  text-shadow: 0 0 0 orange;
}