Icon font inside a circle only works on Windows

Question

I'm showing icons from an icon font inside rounded containers.

This is the web page

This is the CSS for the icons

.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; }

I want to achieve this result

But on Android and OSX I get this

Could someone help me figure how to fix this?