Up And Down Arrow Unicode Font Size Issue

I have one of the most strangest problems that I have faced till today. I am trying to show up and down arrow in unicode in HTML. However, they are not same in size and color. This

Solution 1:

You're not using the correct pair of arrows. Use ˅ entity for the corresponding down arrow.

See updated fiddle

<div>&#708;</div>
<div>&#709;</div>

If you're interested in filled arrows

Demo

<div>&#9650;</div>
<div>&#9660;</div>

Solution 2:

Well they are different. Its not a font size issue. http://graphemica.com/%CB%84 http://graphemica.com/%E2%8C%84

You should use bootstraps glyphicons http://jsfiddle.net/c9gp9a1w/

<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>

bootstrap http://getbootstrap.com/components/#glyphicons

Solution 3:

They are not the matching pair.

&#708 matches with &#709. While &#8964 matches with &#8963.