web-dev-qa-db-fra.com

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

J'utilise un commutateur switch personnalisé (à partir de ici ) et je souhaite ajouter une icône au lieu d'un texte normal. Lorsque je colle le code Ionicons dans la propriété CSS content, il apparaît sous la forme d’un rectangle (indication du fait que le caractère\font n’a pas été trouvé). Comment puis-je passer ceci?

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

JSfiddle

Changer de 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>
htmlcssionicons
12
undroid

Il vous manque une déclaration @font-face qui importe la police "Ionicons", plus la déclaration .onoffswitch-inner:after ne spécifie pas le font-family: "Ionicons";. 

J'ai extrait la déclaration de police Ionicons de leur css et l'a ajoutée à un forked jsFiddle .

14
ckuijjer

Vous omettez la propriété font-family. Lorsque vous utilisez le code d'une icône de police dans la propriété de contenu CSS, vous devez procéder comme suit:

.custom-icon:after {
    content: "\f425";
    font-family: "the name of the font icon you are using";
}

Et c'est tout: P

7
Skecci Dev

Vous devez importer des fichiers css ion icon pour charger la police de l'icône. Veuillez lire le doc sur https://github.com/driftyco/ionicons

  1. Téléchargez et extrayez le pack de polices
  2. Copiez le fichier ionicons.css dans votre projet
  3. Copiez le dossier des polices dans votre projet.
  4. Assurez-vous que les URL de police dans ionicons.css référencent correctement le chemin des polices dans votre projet.
  5. Incluez une référence au fichier ionicons.css à partir de chaque page Web dont vous avez besoin pour l'utiliser.

Ensuite, au lieu de mettre "contenu" directement, vous pouvez utiliser les classes fournies par la structure, comme suit:

<i class="icon ion-home"></i>

2
Jose Mato

Utilisation de Ionic V2

utiliser des ionicons à partir de: https://ionicframework.com/docs/v2/ionicons/ dans votre css, il vous suffit de faire comme ça.

.yourclass {
        font-family: "Ionicons";
        content: "\f3d1";
}

ceci affichera:<ion-icon name="arrow-forward"></ion-icon>

vous pouvez trouver le contenu hexadécimal dans:

node_modules/ionic-angular/css/ionic.css:

node_modules/ionic-angular/css/ionic.dark.css
1
raduken