web-dev-qa-db-fra.com

Changer l'icône Awesome Font sur: survoler

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

Mon objectif est de changer l'icône "tag" lorsque la souris est dessus. A savoir, je voudrais laisser l'icône "tags" apparaître en remplacement de l'ancienne.

Je suis tout à fait sûr qu'il existe une solution simple; utilisant probablement

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

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

Merci d'avance pour votre attention.

csshovericonsfont-awesome
16
Marco

J'aurais deux icônes mais n'en aurais qu'une visible à la fois, en les basculant en fonction de :hover Etat. Je pense que c'est plus flexible que de jouer avec background.

.change-icon > .fa + .fa,
.change-icon:hover > .fa {
  display: none;
}
.change-icon:hover > .fa + .fa {
  display: inherit;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />

<span class="change-icon">
  Tags
  <i class="fa fa-tags"></i>
  <i class="fa fa-gear"></i>
</span>
29
dfsq

Vous pouvez en ajoutant CSS comme:

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

ce qui change le contenu dans le :before pseudo-élément en survolant le .fa-tag.

Je suis sûr que ce n'est pas une bonne idée d'écraser le .fa-tag coiffant. Au moins l'étendre par une classe parent, par exemple .entry-content .fa-tag:hover:before (même si je préférerais un meilleur nom de classe comme author-tags.

7
ckuijjer
.fa-camera-retro:hover:before{
    content: "\f02d";
}

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

vous devrez modifier le content de :before pseudo-élément au survol

voici la liste des codes de contenu fontawesome complets

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

5
Vitorino fernandes

Ce n'est pas une bonne idée d'écraser fa-tag car vous pourriez en avoir besoin ailleurs dans une portée différente. J'irais 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

1
constanton