Trick # 312 | Dieser Beitrag beinhaltet 4791 Wörter. – Geschätzte Lesezeit: ca. 24 Minuten.
Font Awesome hat einige Icons im Portfolio, welche sich perfekt für eine simple Animation eignen und sich hernach um die eigene Achse drehen oder pulsieren. Das ist denkbar einfach umzusetzen – wir zeigen Ihnen wie.
Der Dreh (erste vier Beispiele) wird dabei mit einer CSS-Klasse ausgelöst: «fa-spin». Das Pulsieren (wie im letzten Beispiel) mit «fa-pulse».
Grundsätzlich lassen sich alle Font-Awesome-Icons animieren. Besonders geeignet sind aber die nachfolgenden 16 – auch wenn einige nur für eine der beiden Animationsarten (drehen/pulsieren) taugen. Besonders das Pulsieren kann ab und an nervös wirken und ruckeln … das erinnert oft an die frühen Computerspiele. Aber: urteilen Sie selbst.
Suchen Sie sich Ihre Favoriten, kopieren Sie den zugehörigen HTML-Code und fügen Sie diesen an geeigneter Stelle Ihrer Website in den Texteditor ein. Achten Sie darauf, dass der Code in die HTML-Ansicht eingegeben werden muss, damit er funktioniert.
Drehende Icons
Pulsierende Icons
<i class="fas fa-asterisk fa-spin"></i><i class="fas fa-asterisk fa-pulse"></i><i class="fas fa-certificate fa-spin"></i><i class="fas fa-certificate fa-pulse"></i><i class="fas fa-circle-notch fa-spin"></i><i class="fas fa-circle-notch fa-pulse"></i><i class="fas fa-cog fa-spin"></i><i class="fas fa-cog fa-pulse"></i><i class="fas fa-compass fa-spin"></i><i class="fas fa-compass fa-pulse"></i><i class="far fa-compass fa-spin"></i><i class="far fa-compass fa-pulse"></i><i class="fas fa-crosshairs fa-spin"></i><i class="fas fa-crosshairs fa-pulse"></i><i class="fas fa-life-ring fa-spin"></i><i class="fas fa-life-ring fa-pulse"></i><i class="far fa-life-ring fa-spin"></i><i class="far fa-life-ring fa-pulse"></i><i class="fas fa-snowflake fa-spin"></i><i class="fas fa-snowflake fa-pulse"></i><i class="far fa-snowflake fa-spin"></i><i class="far fa-snowflake fa-pulse"></i><i class="fas fa-spinner fa-spin"></i><i class="fas fa-spinner fa-pulse"></i><i class="fas fa-sun fa-spin"></i><i class="fas fa-sun fa-pulse"></i><i class="far fa-sun fa-spin"></i><i class="far fa-sun fa-pulse"></i><i class="fas fa-sync fa-spin"></i><i class="fas fa-sync fa-pulse"></i><i class="fas fa-stroopwafel fa-spin"></i><i class="fas fa-stroopwafel fa-pulse"></i>Werbung
Werbung
