CSS \ HTML - Comment ajouter des Ionicons à la propriété CSS "content"?

Je suis en utilisant une mesure switch bascule (à partir de ici) et je tiens à ajouter une icône à la place de texte de taille ordinaire. Quand je colle le Ionicons code CSS content propriété, il apparaît comme un rectangle (des indications pour le fait que le caractère\police n'a pas été trouvé). Comment puis-je obtenir pass?

EDIT:
J'ai oublié d'ajouter que j'ai inclus le CSS de CDN.

JSfiddle

Commutateur CSS:

.onoffswitch {
position: relative; 
width: 108px;
-webkit-user-select:none; 
-moz-user-select:none; 
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; 
overflow: hidden; 
cursor: pointer;
border: 2px solid #999999; 
border-radius: 30px;
}
.onoffswitch-inner {
display: block; 
width: 200%; 
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; 
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; 
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; 
float: left; width: 50%; 
height: 40px; padding: 0; 
line-height: 38px;
font-size: 14px; 
color: white; 
font-weight: bold;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #FFFFFF; 
color: #BABABA;
}
.onoffswitch-inner:after {
content: "\f425"; /* <--------THE ICON GOES HERE */
padding-right: 10px;
background-color: #8035A7; 
color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block; 
width: 41px; margin: -1.5px;
background: #FFFFFF;
border: 2px solid #999999; 
border-radius: 50px;
position: absolute; 
top: 0; 
bottom: 0; 
right: 66px;
-moz-transition: all 0.3s ease-in 0s; 
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 
transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px; 
}

HTML:

    <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<p id="impressions_meter_text">Impressions meter</p>
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>

source d'informationauteur undroid | 2015-05-03