Font Awesome Icons

Die Bibliothek "Font Awesome Icons" bietet 519 kostenlose skalierbare Vektorsymbole. Diese Bibliothek ist sowohl für den persönlichen als auch für den kommerziellen Gebrauch völlig kostenlos. Ursprünglich für Bootstrap entwickelt, können diese Symbole einfach angepasst werden.

Laden der Schriftbibliothek

Um die Font Awesome-Bibliothek zu laden, kopieren Sie die folgende Zeile und fügen Sie sie in den Abschnitt <head> der Webseite ein.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Verwenden des Symbols

Font Awesome bietet mehrere Symbole. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol der indischen Währung verwendet.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Größe definieren

Sie können die Größe eines Symbols erhöhen oder verringern, indem Sie seine Größe mithilfe von CSS definieren und zusammen mit dem Klassennamen verwenden, wie unten gezeigt. Im angegebenen Beispiel haben wir die Größe als 6 em deklariert.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Farbe definieren

Genau wie bei der Größe können Sie die Farbe der Symbole mithilfe von CSS definieren. Das folgende Beispiel zeigt, wie Sie die Farbe des indischen Währungssymbols ändern.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Liste der Kategorien

Font Awesome bietet 519 Symbole in den folgenden Kategorien:

Webanwendungssymbole
Hand Icons
Transportsymbole
Geschlechtssymbole
Dateityp-Symbole
Spinner Icons
Formularsteuerungssymbole
Zahlungssymbole
Diagrammsymbole
Währungssymbole
Texteditor-Symbole
Richtungssymbole
Video-Player-Symbole
Markensymbole

Um eines dieser Symbole zu verwenden, müssen Sie den Klassennamen in den in diesem Kapitel angegebenen Programmen durch den Klassennamen des gewünschten Symbols ersetzen. In den kommenden Kapiteln dieser Einheit (Font Awesome) haben wir die Verwendung und die jeweiligen Ausgaben verschiedener Font Awesome-Symbole in Kategorien erläutert.