css content character rendering strange

Question

I'm using the :after pseudo-element to add a character beside each item in a list. The CSS I'm currently using is:

li:after {
      display: inline-block;
      content: '\25b6';
      color: #dc313a;
      padding-right: 16px;
      padding-left: 6px;
      font-weight: normal;
}

It displays fine in Chrome (most of the time), Firefox, and IE11. This is what it should add to the end of each li element:

In Chrome sometimes it displays this and pressing F5 will fix it.

In Edge it is displaying this on some computers

Does anyone know why I sometimes get those characters in Chrome and why Edge is displaying something completely different on some computers?

Answer 1

Despite what many website say character 25b6 doesn't work the same in all browsers. After looking in Character Map in Windows for the Ariel font I found that 25ba also gives the same character (well close enough). After updating my css with 25ba instead of 25b6 it shows correctly in all browsers I can test against.

It appears that with 25b6 edge just changes it to an emoticon and even adding fe0e after it doesn't stop edge from changing it.