font-awesome Tutorial
Erste Schritte mit font-awesome

Bemerkungen

Konfiguration

Es gibt verschiedene Ansätze, um FontAwesome in eine Website zu integrieren:

Für einfaches HTML / CSS:

• Laden Sie den hier verfügbaren zip herunter, entpacken Sie ihn und kopieren Sie den Inhalt auf Ihre Website. Dann verweisen /css/font-awesome.css wie /css/font-awesome.css auf die /css/font-awesome.css im head der Webseite:
  
  <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
• Verweisen Sie es im head der Webseite mit einer CDN-Adresse. Eine solche Adresse wäre https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css . Um darauf zu verweisen, verwenden Sie einfach ein link Tag, setzen Sie stattdessen die Quelle auf die CDN-Adresse

Für Paketmanager:

Die meisten Paketmanager unterstützen Font Awesome als Paket. Nachfolgend einige Beispiele:

• NuGet: Suchen und installieren Sie einfach Font-Awesome oder führen Sie den folgenden Befehl in der Install-Package FontAwesome : Install-Package FontAwesome
• Ruby: Führen Sie einfach diesen Befehl aus: gem install font-awesome-rails
• npm: Führen Sie einfach diesen Befehl aus: npm install font-awesome

Grundlegendes Beispiel: Verwenden eines Symbols

Der einfache Anwendungsfall besteht darin, auf ein einzelnes Symbol in seiner normalen Größe zu verweisen: <i class="fa fa-camera-retro"></i> (Ergebnis in dieser Geige anzeigen.)

Erstellen Sie ein leeres Tag (es wird empfohlen, <i> verwenden) und weisen Sie die Klasse " fa " und die dem gewünschten Symbol entsprechende Klasse zu (siehe Liste der Symbole hier ).

Font Awesome verwenden

Font Awesome ist eine extrem einfache und dennoch leistungsfähige Bibliothek, mit 634 Symbolen, die in wenigen Worten verfügbar sind.

Wie funktioniert es? Font Awesome verwendet Unicode-Zeichen, die in einem ../fonts gespeichert sind, um alle i.fa Elemente in das entsprechende Unicode-Zeichen zu ändern, i.fa das Symbol als Text i.fa .

Wie erstelle ich ein Symbol? Alle Symbolklassen müssen ein i Element oder ein italic element , vor allem für die beste Praxis, verbessern aber auch die Leistung mit Font Awesome. Alle Icons haben auch die Klasse fa . Dies kennzeichnet ein Symbol und funktioniert nicht ohne . Danach fügen Sie einfach das gewünschte Symbol hinzu, dem ein anderes fa- vorangestellt ist. Ein fertiges Beispiel ist unten:

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

Da Font awesome mit Unicode-Zeichen arbeitet, können auch Textanpassungen wie font-size , color usw. angewendet werden.