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.
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
Vous devez vous connecter pour publier un commentaire.
Il vous manque un
@font-face
déclaration que les importations "Ionicons" face à la police, en plus de la.onoffswitch-inner:after
déclaration ne précise pas lafont-family: "Ionicons";
.J'ai extrait les Ionicons déclaration de police de leur css et de l'ajouter à une fourche jsFiddle.
Vous omettre la propriété font-family. lorsque vous utilisez un code à partir d'une icône de police en CSS contenu de la propriété, vous devez faire comme ceci :
Et c'est tout 😛
Vous avez besoin d'importer des ions icône des fichiers css à charger l'icône de la police. S'il vous plaît, lire la doc à https://github.com/driftyco/ionicons
Alors, au lieu de mettre "contenu" directement, vous pouvez utiliser les classes qui cadre offrir à nous en tant que:
<i class="icon ion-home"></i>
À L'Aide Ionique V2
à utiliser ionicons à partir de : https://ionicframework.com/docs/v2/ionicons/ dans votre css, vous avez juste besoin de faire comme cela.
ce sera d'impression:
<ion-icon name="arrow-forward"></ion-icon>
vous pouvez trouver le contenu hexadécimal: