圆圈内的图标字体仅适用于Windows

Question

我在圆形容器内显示图标字体的图标。

This is the web page

这是图标的CSS

.icon .circle:before{
    font-family: "PlayAgenda", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
    text-rendering: optimizeLegibility;
    font-style: normal; 
    margin: 0 auto;
}

.icon .circle {
  display: inline-block;
  font-weight: normal;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  padding: 32px;
  margin: 0;
  overflow: hidden;
  font-size: 57px;
  text-align: center;  
  position: relative; 
}       

.icon .circle:before{ 
  color: #FFFFFF;
  position: absolute;
  margin-top: -0.4em;
  margin-left: -25px;
  display: block;
  width: 50px;
  top: 50%;
}

.icon.console .circle:before{ content: 'A'; }
.icon.board .circle:before{ content: 'G'; }
.icon.card .circle:before{ content: 'C'; }
.icon.war .circle:before{ content: 'B'; }
.icon.gdr .circle:before{ content: 'E'; }

.icon.console-background .circle{ background-color: #009EDB; }
.icon.board-background .circle { background-color: #8CC63E; }
.icon.card-background .circle{ background-color: #7F3F98; }
.icon.war-background .circle { background-color: #F04F38; }
.icon.gdr-background .circle{ background-color: #FAA619; }

我想实现这个结果

但是在Android和OSX上我得到了这个

有人可以帮我解决这个问题吗？