Est-il possible de changer entre les deux fontawesome icônes sur le vol stationnaire?

J'ai une balise d'ancrage avec un font-awesome icône comme suit

<a href="#" class="lock"><i class="icon-unlock"></i></a>

Est-il possible de changer d'icône sur le vol stationnaire à une icône différente?

mon CSS

.lock:hover{color:red}

Côté de l'icône devient rouge j'aimerais aussi changer l'icône à la suite de

<i class="icon-lock"></i>

Est-ce possible sans l'aide de JavaScript? Ou dois-je besoin de Javascript/Jquery sur le vol stationnaire pour cela?

Merci.

Êtes-vous à l'aide de jquery ou tout simplement du javascript?
Salut @Avit j'ai Jquery va.
CSS ne peut pas changer le contenu de la page. Vous avez besoin d'utiliser le JavaScript.
fontawesome icônes sont dans le CSS de contenu généré. JavaScript n'est pas nécessaire.

OriginalL'auteur BaconJuice | 2013-10-21

  1. 49

    Vous pourriez bascule qui est indiqué sur le vol stationnaire:

    HTML: 

    <a href="#" class="lock">
    <i class="icon-unlock"></i>
    <i class="icon-lock"></i>
</a>

    CSS: 

    .lock:hover .icon-unlock,
.lock .icon-lock {
    display: none;
}
.lock:hover .icon-lock {
    display: inline;
}

    Ou, vous pouvez modifier l' content de la icon-unlock classe:

    .lock:hover .icon-unlock:before {
    content: "\f023";
}
    Astuce. 🙂
    Je vous remercie. Appris quelque chose de nouveau aujourd'hui 😉
    magnifiquement simple, thx!
    Parole de conseils - ne pas utiliser la première méthode. Si vous l'utilisez, par exemple sur un tableau de bord pour changer l'icône de suppression sur le vol stationnaire par exemple, vous remarquerez rapidement un " pop " effet lors de la numérisation sur les icônes. Il devrait y avoir aucun besoin d'encombrer votre balisage avec toutes ces icônes supplémentaires lorsque cela peut être fait entièrement en CSS avec la seconde méthode.
    la deuxième méthode a fonctionné pour moi, pour mon dossier de fermer et ouvrir, simple et propre. salut à zzzzBov!

    OriginalL'auteur

  2. 4

    Si vous utilisez SCSS, vous pouvez tout simplement le faire. Beaucoup léger que tout le JS solutions et plus léger sur le DOM.

    .icon-unlock:hover {
  @extend .icon-lock;
}

    OriginalL'auteur

  3. 4

    Dans mes modèles, j'utilise souvent FontAwesome et je suis venu avec cette astuce CSS

    * > .fa.fa-hover-show,
*:hover > .fa.fa-hover-hidden {
    display: none;
}
*:hover > .fa.fa-hover-show {
    display: inline-block;
}

    puis si j'ai besoin d'avoir une icône sur le vol stationnaire je viens d'ajouter deux icônes, la valeur par défaut, on aura également la ".fa-hover-caché" de la classe, l'autre aura ".fa-hover-show".

    et si j'avais un texte que je veux changer, avec l'icône, que dois-je faire? Comme <i class="icon-déverrouiller"></i> Unlock <i class="icon-lock"></i> Lock

    OriginalL'auteur

  4. 3

    Simple façon d'ouvrir le fichier css de police génial et icône de changement de code sur le vol stationnaire...

    pour l'exemple ci-dessous est le code de l'icône de verrouillage

    content: "\f023";

    et voici ci-dessous le code pour déverrouiller l'icône dans le css que vous pouvez le mettre sous :hover

    .icon-unlock:before {
  content: "\f09c";
}

    OriginalL'auteur

  5. 1

    En jquery il serait juste:

    $(document).ready(function () {
        $('.icon-unlock').hover(function () {
            $(this).addClass('icon-lock');
            $(this).removeClass('icon-unlock'); 
        }, function () {
            $(this).addClass('icon-unlock');
            $(this).removeClass('icon-lock');
        });


    });

    Ici est un travail jsfiddle de cette.

    Si vous utilisez jquery ui, alors vous pouvez utiliser .switchClass.

    Un exemple de ceci serait:

    $(document).ready(function() {
   $(".icon-unlock").switchClass("icon-unlock", "icon-lock");
});

    L'api .switchClass() est situé ici

    OriginalL'auteur