css - 円内のアイコン フォントは Windows でのみ機能します

Question

丸みを帯びたコンテナー内のアイコン フォントのアイコンを表示しています。

これはウェブページです

これはアイコンの 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ではこれを取得します

誰かがこれを修正する方法を理解するのを手伝ってくれますか?