Modifier la Police Génial icône sur :hover

J'espère que cette question n'a pas déjà été posée quelque part dans ce forum. Je jure que j'ai cherché!

Mon but est de changer le "tag" icône lorsque la souris est dessus. À savoir, je voudrais que les "tags", l'icône apparaît en remplacement de l'ancien.

Je suis assez sûr qu'il y est une solution de facilité, probablement à l'aide de

.fa-tag:hover {
 background: url(something);
}

Voici la page de mon site avec la .fa-tag icônes : http://wordsinthebucket.com/about

Je vous remercie d'avance pour votre attention.

Changement avec quoi? Une autre icône?
Oui. Comme l'a déclaré: à Savoir, je voudrais que les "tags", l'icône apparaît en remplacement de l'ancien. Je vous remercie pour votre réponse.

OriginalL'auteur Marco | 2014-12-27

  1. 7

    Vous pouvez par l'ajout de CSS comme:

    .fa-tag:hover:before {
  content: "\f02c"
}

    qui change le contenu de la :before pseudo élément lors du survol de la .fa-tag.

    Je suis assez sûr que c'est pas une bonne idée de remplacer le .fa-tag style. Au moins, portée par une classe parent, par exemple .entry-content .fa-tag:hover:before (même si je préfère un meilleur nom de la classe comme author-tags.

    C'est comment il devrait être fait. Mais il vaut mieux l'utiliser comme ceci <i class="fa fa-tags change-icon"></i>. Et de définir .fa.change-icon:hover { ... }.
    J'aime votre approche le mieux franchement
    Je vous remercie beaucoup. Votre solution est plus facile pour moi. Mais malheureusement il ne fonctionne pas. Sans doute parce que mon .fa-tag icône est "l'intérieur" d'une fa-ul, un fa-li et un a tags? Voici le code: <ul class="fa-ul"> <li><a href="http://wordsinthebucket.com/author/dukemwacha"><i class="fa-li fa fa-tag fa-3x" style="color: #bc1313;"></i></a> Évidemment, j'ai ajouté ton code CSS stylsheet. Merci à vousune et @dfsq pour votre aide.
    Voir codepen.io/ckuijjer/stylo/emdKYX pour un exemple de travail, et imgur.com/OOGL759 pour la façon dont il regarde dans google Chrome DevTools. Peut-être que votre css personnalisé n'est pas chargé correctement?
    Cela me rend fou. Littéralement. Pas de travail pour moi. Voici ma console: [i.imgur.com/7PX9nyH.png] Et voici mon css modifié: [i.imgur.com/elUwg3q.png]

    OriginalL'auteur ckuijjer

  2. 5
    .fa-camera-retro:hover:before{
    content: "\f02d";
}

    démo - http://www.bootply.com/oj2Io7btD7

    vous aurez besoin de changer la content de :before pseudo élément sur le vol stationnaire

    voici la liste complète de fontawesome codes de contenu

    http://astronautweb.co/snippet/font-awesome/

    Je vous remercie beaucoup. Votre solution est plus facile pour moi. Mais malheureusement il ne fonctionne pas. Sans doute parce que mon .fa-tag icône est "l'intérieur" d'une fa-ul, un fa-li et un a tags? Voici le code: <ul class="fa-ul"> <li><a href="http://wordsinthebucket.com/author/dukemwacha"><i class="fa-li fa fa-tag fa-3x" style="color: #bc1313;"></i></a> Évidemment, j'ai ajouté ton code CSS stylsheet. Je vous remercie pour votre aide.
    bootply.com/hB46Ha5EUX
    Cela me rend fou. Littéralement. Pas de travail pour moi. Voici ma console: [i.imgur.com/7PX9nyH.png] Et voici mon css modifié: [i.imgur.com/elUwg3q.png]
    Ok résolu. Comme le suggère mon CSS n'était pas chargé correctement. Heureusement, mon thème comme son propre CSS personnalisé de l'éditeur de code qui, apparemment, est chargé avant le style.fichier css. En ajoutant le code, il a résolu le problème. Je vous remercie beaucoup.

    OriginalL'auteur Vitorino fernandes

  3. 1

    Ce n'est pas une bonne idée de remplacer fa-tag que vous pourriez avoir besoin d'elle quelque part d'autre dans un autre champ. Je voudrais aller comme ceci:
    http://antonakoglou.com/change-font-awesome-icon-content-hover/

    qui est en fait la deuxième partie de cette réponse que je viens de découvrir:
    https://stackoverflow.com/a/19503006

    OriginalL'auteur constanton