FontAwesome-Icons Spinnen nur bei mouseover?

Font-awesome, wie kann ich diesen code verwenden : <i class="fa fa-spinner fa-spin"></i> Arbeit, die auf die Maus über nur???

InformationsquelleAutor Vachos | 2014-01-09
  1. 22

    Anstelle von überschreiben der Klasse, Sie können auch einfach erstellen Sie eine andere eine für den hover nur:

    .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>

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

    Hinweis: bei Verwendung von Font-Awesome 4.2+ können Sie brauchen, um namespace die animation mit "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;
}
    • Leider scheint nicht mehr zu funktionieren mit der FA 4.2.0. Irgendeine Idee?
    • Upps, Fehler gefunden: die github.com/FortAwesome/Font-Awesome/issues/3885
    • Es wird großartig zu ziehen, fordern Sie Ihre Klasse auf FontAwesome Github 😉
    • Da die Font-Awesome 4.2, Sie haben an den namespace der animation mit "fa-" : animation: fa-spin 2s infinite linear;
    • Danke @AlFoиceѫ, aktualisiert haben, die Antwort zu dieser
    InformationsquelleAutor Chris
  2. 3

    Könntest du auch javascript mit der Bibliothek jquery:

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

    Würde, dass es nur Spinnen auf hover-und reset-zurück zu seiner ursprünglichen position, wenn seine über -, dass gesagt wird, es kann seltsam Aussehen mit einige icons (ich habe nur verwendet es mit dem Rädchen). Für unendliche Spinnen auf hover-können Sie einfach diesen:

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

    jquery link: https://jquery.com/

    • Ich Frage mich, warum niemand schlägt eine änderung der Klasse, bis ich fand Ihre Antwort. sauber jquery Ansatz ohne css - source-Modifikation.
    InformationsquelleAutor Nesiehr
  3. 0

    so, in der meine Website-css ich dies ändern 

    .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;
}

    mit diesem 

    .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;
}
    InformationsquelleAutor Vachos
  4. 0

    nur font-awesome ccs-Datei
    für mehr details
    http://l-lin.github.io/font-awesome-animation/

    haben Sie eine detaillierte Dokumentation über die Verwendung der ccs -

    InformationsquelleAutor m. oscar
  5. 0

    font-awesome 5, habe ich zufällig entdeckt, dass dies durch die neue svg-Bibliotheken, die es implementiert
    Ich mache Folgendes:

    .fa-spin-hover:hover svg {
-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;}

    dann ist es zugewiesen, die superior-element und bereit

    InformationsquelleAutor Dariem Lázaro García López
Schreibe einen Kommentar