MEDIUM BLACK CIRCLE always black on some devices - html

Question

I'm using the Unicode Character 'MEDIUM BLACK CIRCLE' aka:
&#9899
and then changing its color. It works fine on most of my devices, but on my android phone and some collegues PC's (same pc brand and browser) it is always black and not #009FDA.
<span style="color:#009FDA;">&#9899 </span>
How do solve this?
Solved!
solution(font-awesome):
<i class="fa fa-circle" style="color:#009FDA;" aria-hidden="true"></i>
I'm still very interested in why this happend if anyone knows..

Answer 1

You have 2 options
Option 1:Unicode charecter
Use Unicode charecter. it works
body{
font-size:15px;
line-height:15px;
}
<span style="color:#009FDA; ">&#9899 </span>
<br/>
<span style="color:#009FDA; font-size:250%; height:15px; ">•</span>
Option 2:Shape round using border-radius (works fine in all browsers)
Class for circles which has border-radius:50%; and same width & height
span.circle{
height:10px;
width:10px;
border-radius:50%;
background-color:#009FDA;
display:inline-block;
}
<span class='circle'></span>
Other options: You can use Font-awesome, svg or images