如何使自定义glyphicon IE兼容

Question

我有以下fiddle我将两个不同的跨度组合在一起以创建一个用户＆＃39;一个圆圈中的图标。

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="glyphicon glyphicon-one-fine-empty-dot" aria-hidden="true"></span>


form-heading .glyphicon-user {
  position: relative;
    color: #9A9A98;
    font-size: 24px;
    left: 25px;
    top: -1px;
}

.glyphicon-one-fine-empty-dot:before {
    color: #9A9A98;
    content:"\20dd";
    font-size: 60px;
    position: relative;
    left: -18px;
}

它在Chrome中运行良好但在IE 11中中断。 有关如何使其在IE中运行的任何建议。

感谢。

修改

这就是Edge和IE 11的外观