Font Awesome

Seit Version 2.0.3. nutzt Urwahl3000 Font Awesome. Was ist das? Grob gesagt: Eine Schriftart, die keine Buchstaben ausgibt, sondern kleine Icons.

Warum ist das gut? Weil man so auf ganz viele Grafiken verzichten kann und stattdessen ganz leicht auf Icons zurückgreift, die man in Farbe und Größe super einfach anpassen kann. So sind z.B. die ganzen Social Media Links in der Seitenleiste, das Lupensymbol für die Suche oder die Icons unten im Kommentarbereich alle mit Font Awesome realisiert. Mega!

Was heißt das für Euch? Ihr könnt auch im Fließtext ganz einfach die Icons verwenden, falls ihr wollt. Wie geht das? Ganz einfach:

Zuerst sucht ihr Euch hier das passende Icon aus: Font Awesome Icons und klickt dann doppelt darauf. Wir wählen das Icon „fa-heart„.

Dort wird Euch jetzt ein HTML-Code angezeigt, der wie folgt lautet:

<i class="fa fa-heart"></i>

Den fügt ihr am Besten so ein, in dem ihr den Editor kurz oben von „Visuell“ auf „Text“ umstellt und den Code einfach einfügt. Das Ergebnis sieht dann so aus:

Hier ist unser Herz-Icon.

Natürlich könnt ihr auch alles genau so machen, wie es in den Beispielen aufgeschrieben steht. Nehmen wir einfach das erste Beispiel:

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Voilá, so einfach! Toll, ne?

[fa icon="heart" set="fas" margin="r2" color="#000000" class="fa-fw"]

Attribute:

„icon“:
Name des Icons, Default: „heart“
Siehe https://fontawesome.com/icons?d=gallery&m=free
„set“:
Names des Sets, aus dem der Icon stammt, in der freien Variante „fas“ („Solid“, Default) oder „fab“ („Brands“)
Siehe https://fontawesome.com/icons?d=gallery&m=free
„margin“:
Außenabstand des Icons, z.B. „r2“ hat einen rechten Abstand von 0.5rem (Default: leer). Der erste Buchstabe steht für die Richtung, die folgende Ziffer von 0 bis 5 für die Weite (analog zu „Spacing“-Klassen in „Bootstrap 4“).
Mögliche Werte für die Richtung:
a (all), t (top), b (bottom), l (left), r (right), x (left + right), y (top + bottom).
„class“:
Zusätzliche CSS-Klassen (Default: leer), insb. auf für „Font Awesome“-spezifische Klassen wie z.B. für „Size“ oder „Fixed width“.
Siehe https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
„color“:
Setzt die Farbe, erwartet eine Hex-Notation, z.B. „#46962b“ (Default: leer).