FontAwesome Icônes Spin uniquement à la souris?

Dans la police impressionnant comment puis-je utiliser ce code : <i class="fa fa-spinner fa-spin"></i> travail sur la souris sur seulement?

OriginalL'auteur Vachos | 2014-01-09

  1. 21

    Au lieu de l'annulation de la classe, vous pouvez aussi en créer un autre pour passez seulement:

    .fa-spin-hover:hover {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}


<i class="fa fa-circle-o-notch fa-spin-hover"></i>
<i class="fa fa-spinner fa-spin-hover"></i>

    Violon: http://jsfiddle.net/Xw7LH/1/

    Remarque: si vous utilisez Font-Awesome 4.2+ vous devrez peut-être l'espace de noms de l'animation avec "fa":

    .fa-spin-hover:hover {
  -webkit-animation: fa-spin 2s infinite linear;
  -moz-animation: fa-spin 2s infinite linear;
  -o-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
    Malheureusement ne semble pas fonctionner plus avec FA 4.2.0. Une idée?
    Nevermind, a trouvé un bug pour ceci: github.com/FortAwesome/Font-Awesome/issues/3885
    Ce sera génial de pull request votre classe sur FontAwesome Github 😉
    Depuis que Font-Awesome 4.2, vous devez d'espace de noms de l'animation avec "fa-" : animation: fa-spin 2s infinite linear;
    Merci @AlFoиceѫ, ont mis à jour la réponse à inclure ce

    OriginalL'auteur Chris

  2. 3

    Vous pouvez également utiliser javascript avec la librairie jquery:

    $('.fa-spinner').hover(function() {
    $(this).addClass('fa-spin');
}, function() {
    $(this).removeClass('fa-spin');
});

    Qui rendrait seulement tourner sur le vol stationnaire et de la remettre à sa position d'origine lors de sa plus - cela étant dit, il peut paraître bizarre à certains des icônes (je ne l'ai utilisé avec la cog). Pour infini filer sur le vol stationnaire, vous pourriez faire ceci:

    $('.fa-spinner').hover(function() {
    $(this).addClass('fa-spin');
});

    jquery lien: https://jquery.com/

    Je me demandais pourquoi personne n'a suggéré de changer de classe jusqu'à ce que je trouve votre réponse. nettoyer jquery approche sans css source de modification.

    OriginalL'auteur Nesiehr

  3. 0

    afin de le faire fonctionner sur mon site css-je changer cette 

    .fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

    avec cette 

    .fa-spin:hover {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

    OriginalL'auteur Vachos

  4. 0

    suffit d'utiliser la police génial scc fichier
    pour plus de détails
    http://l-lin.github.io/font-awesome-animation/

    ils ont une documentation détaillée sur la façon d'utiliser le ccs

    OriginalL'auteur m. oscar