Animieren von Icons

Brauchen Sie ein Lade- oder Status-Kommunikationssymbol zum Drehen? Sie sind an der richtigen Stelle angekommen. Wir haben einige grundlegende Animationen in unser Support-Styling aufgenommen, damit Sie es verwenden können.

Verwenden Sie die Fa-Spin-Klasse, um ein beliebiges Symbol zum Drehen zu bringen, und verwenden Sie fa-pulse, um es mit 8 Schritten rotieren zu lassen. Funktioniert besonders gut mit fa-spinner & alles in der Spinner Icons Kategorie.
Font Awesome


Übungsseite Animierte Webfont-Icons fa-spin

Animierte Icons fa-spin

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Animierte Webfont-Icons fa-spin</title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Animierte Webfont-Icons fa-spin</h3>
<div class="fa-4x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-asterisk fa-spin"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
</div>
</body>
</html>

Übungsseite Animierte Webfont-Icons fa-pulse

Animierte Icons fa-pulse

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Animierte Webfont-Icons fa-pulse</title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Animierte Webfont-Icons fa-pulse</h3>
<div class="fa-4x">
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-circle-notch fa-pulse"></i>
<i class="fas fa-sync fa-pulse"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-asterisk fa-pulse"></i>
<i class="fas fa-stroopwafel fa-pulse"></i>
</div>
</body>
</html>

Icon Animation + Wackeln

Wir haben hart gearbeitet, um Icons perfekt zentriert zu halten, wenn sie sich drehen oder pulsieren. Wir haben jedoch Probleme mit mehreren Browsern und den Webfonts + CSS-Version von Font Awesome gesehen. Durch viele Untersuchungen scheint dies ein Problem mit Web-Fonts im Allgemeinen zu sein und nicht etwas, das wir direkt beheben können. Font Awesome