css content character rendering strange

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?