Icons umfließen
Gelegentlich möchten Sie vielleicht Text um ein Symbol herumfließen lassen.
Dies lässt sich erreichen, indem das Icon nach links oder rechts ausgerichtet wird – z. B. mit den Klassen fa-pull-left oder fa-pull-right.
| CSS-Klassen | Beschreibung |
|---|---|
.fa-pull-start |
Positioniert das Icon auf der linken Seite - das wird mit float: inline-start erreicht |
.fa-pull-end |
Positioniert das Icon auf der rechten Seite - das wird mit float: inline-end erreicht |
Unterschiedliche Methoden
Für die Ausrichtung innerhalb eines Textes sollten die CSS-Eigenschaften float: inline-start und float: inline-end bevorzugt verwendet werden, da sie sich automatisch an der Schreibrichtung des Textes orientieren.
Für eine feste Ausrichtung eignen sich die CSS-Eigenschaften float: left und float: right, da diese das Element unabhängig von der Schreibrichtung immer an der linken bzw. rechten Seite des Textes ausrichten.
Beispiel
Im unten angezeigten Beispiel wird im zweiten Absatz die Schreibrichtung mit <p dir="rtl"> festgelegt.
In der Regel erkennt der Browser die Schreibrichtung jedoch bereits anhand der im Tag <html lang="…"> angegebenen Sprache.
Das Icon .fa-coffee wird an den Beginn des Textes ausgerichtet. Schreibrichtung: von Links nach Rechts
Das Icon .fa-coffee wird an den Beginn des Textes ausgerichtet. Schreibrichtung: von Rechts nach Links.
<h1>Beispiel mit <code>float: inline-start;</code></h1>
<p><i class="fas fa-coffee fa-pull-start"></i> Das Icon <code>.fa-coffee</code> wird an den Beginn des Textes ausgerichtet. <strong>Schreibrichtung: Links nach Rechts</strong></p>
<p dir="rtl"><i class="fas fa-coffee fa-pull-start"></i> Das Icon <code>.fa-coffee</code> wird an den Beginn des Textes ausgerichtet.<strong>Schreibrichtung: Rechts nach Links</strong></p>
<h2>Beispiel mit <code>float: left;</code></h2>
<p><i class="fas fa-coffee" style="float: left;"></i> Das Icon <code>.fa-coffee</code> wird an den Beginn des Textes ausgerichtet. <strong>Schreibrichtung: Links nach Rechts.</strong></p>
<p dir="rtl"><i class="fas fa-coffee" style="float: left;"></i> Das Icon <code>.fa-coffee</code> wird an den Beginn des Textes ausgerichtet. <strong>Schreibrichtung: Rechts nach Links.</strong></p>