Drehen und spiegeln von Webfont-Icons

Manchmal müssen Sie ein Symbol drehen, flipen oder spiegeln, damit es in Ihrem Projekt oder Design funktioniert. Wir haben einige schnelle Hilfsprogramme hinzugefügt, die dabei helfen.

Um Symbole beliebig zu drehen und umzudrehen, verwenden Sie die fa-rotate * - und fa-flip- * -Klassen, wenn Sie auf ein Symbol verweisen.
Font Awesome


Dreh und Spiegel Klassen

Klasse Rotationsbetrag
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal Spiegelung horizontal
fa-flip-vertical Spiegelung vertikal

Übungsseite drehen und spiegeln von Webfont-Icons

Drehende Webfont-Icons

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Drehende Webfont-Icons </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Drehende Webfont-Icons</h3>
<div class="fa-4x">
<i class="fab fa-font-awesome"></i>
<i class="fab fa-font-awesome fa-rotate-90"></i>
<i class="fab fa-font-awesome fa-rotate-180"></i>
<i class="fab fa-font-awesome fa-rotate-270"></i>
<i class="fab fa-font-awesome fa-flip-horizontal"></i>
<i class="fab fa-font-awesome fa-flip-vertical"></i>
</div>
</body>
</html>


Sie können auch eigene Dreh-Klassen definieren. Hier einige Beispiele

Übungsseite: eigene Dreh Klassen

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite eigene Dreh Klassen </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
<style>
<!--
.fa-rotate-45 {
transform:rotate(45deg)
}
.fa-rotate-135 {
transform:rotate(135deg)
}
.fa-rotate-225 {
transform:rotate(225deg)
}
-->
</style>
</head>
<body>
... Probieren Sie es mal aus ...
</body>
</html>