Looking for font-awesome Keywords? Try Ask4Keywords

font-awesomeErste Schritte mit font-awesome


Bemerkungen

FontAwesome ist ein Satz von mehr als 600 Vektor-Icons. Es ist frei verfügbar unter OFL / MIT -Lizenz und kann in Open-Source- oder kommerziellen Projekten verwendet werden.

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 ).

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

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> Fa-Bleistift

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