Symbole auf Webseiten

Es gibt mehrere Symbol-Bibliotheken, aber Font Awesome ist eine alt eingesessene und ziemlich beliebte Version. Wichtig für den Entwurf von Webseiten ist, dass die verwendeten Symbole einem einheitlichen Stil folgen. Genau das leistet eine solche Symbol-Bibliothek. Es gibt nun eine neue Version 5.0 und diese Version versucht – im Gegensatz zu ihrer kostenlosen Vorgängerin – in einer Pro-Variante Geld zu verdienen. Alle folgenden Darstellungen kommen aber mit der kostenlosen Version aus. Das folgende Bild zeigt den Beginn von 104 Symbolen der Kategorie „Pfeile“ von insgesamt ca. 1000 kostenlosen Symbolen.

Als erstes kopiert man die im Web frei verfügbare css-Datei in den head-Abschnitt seiner HTML-Datei:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

Dort, wo man die Symbole anwenden will, fügt man ein leeres i-Tag ein, dessen class-Attribut zum Ausdruck bringt, dass es sich um ein Symbol aus der Font Awesome-Bibliohtek handelt:

  <!--User Symbol in verschiedenen Stilen -->
  <i class="fas fa-user"></i>
  <i class="far fa-user"></i>
  <!--Symbol einer Marke-->
  <i class="fab fa-github-square"></i>

Und so schaut das aus (die Symbole sind größer und einzeilig eingestellt worden):

Wie die Symbole aussehen, wie das zu verwendende Kürzel heißt und welche davon kostenlos sind, zeigt die Seite „All 2.707 Awesome Icons„. 989 Symbole sind kostenlos, die anderen nur in der Pro-Version verfügbar. Weiter kann man in der Pro-Version jedes Symbol zwischen „solid“, „regular“ und „light“ umschalten. Die Pro-Lizenz kostet 60 $.

Symbolfarbe

Ein Symbol nimmt die Farbe des Containers an, in dem es eingeschlossen ist. Um also die Farbe eines Symbols zu ändern, muss man die Farbe des Containers ändern, zum Beispiel:

<div style="font-size:3em; color:Tomato">
  <i class="fas fa-camera-retro"></i>
</div>

 

Symbolgröße

Die Größe kann durch die Attribute fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x gesteuert werden.

Aufzählungszeichen

• List icons can
• be used to
• replace bullets
• in lists

Animierte Symble

Man sieht, auch in der kostenlosen Version mit ca. 1000 Symbolen kann man schon eine Menge machen.

Einschränkungen der kostenlosen Version

• 989 (von 2707) Symbolen auswählbar
• 40 Symbole gleichzeitig einsetzbar
• keine Variation des Symbol-Stils
• weitere 46 Symbolsammlungen nicht zugänglich
• keine weitergehenden Tools