12 Dez

Weshalb du unbedingt Font Awesome nutzen solltest

Hast du schon einmal von Font Awesome gehört? Das ist eine Sammlung von 675 Vektor-Icons, die du ganz einfach einbinden und nach deinen Wünschen modifizieren kannst. Ich zeige dir hier, wie du die Icons verwendest und welchen Nutzen Font Awesome für dein Blog oder deine Website hat.

 

Weshalb du unbedingt Font Awesome nutzen solltest um dein Blog oder deine Website zu verschönern

 

Das bietet dir Font Awesome

Font Awesome bietet in der aktuellsten Version (4.7) 675 freie Icons, die du überall im Netz nutzen kannst. Egal ob Blog oder Website, nur als Symbole oder sogar als Buttons: Weil es sich bei den Icons um Vektorgrafiken handelt, sind sie skalierbar und dabei immer gestochen scharf. Und mit ein bisschen CSS kannst du dir genau die Icons basteln, die du willst.

Font Awesome bietet dir 675 freie Vektor-Icons in einer Sammlung. Das Aussehen kann dabei ganz nach deinen Wünschen per CSS verändert werden.

Font Awesome bietet dir 675 freie Vektor-Icons in einer Sammlung. Sie können dabei ganz nach deinen Wünschen per CSS verändert werden.

In diesem Post zeige ich euch, wie ich meine Social Media Icons überarbeitet habe. Meine zwei Ziele: Mehr Farbe in mein Blog bringen und bessere Grafiken verwenden.

Um die von Font Awesome bereitgestellten Icons zu nutzen, muss entweder alles heruntergeladen werden – oder ihr lasst euch per Mail einen Font Awesome Embed Code zusenden. Damit spart ihr euch Download und Hosting und habt immer die aktuellsten Versionen in euren Projekten.

Der allerschwerste Teil war für mich die Auswahl der Icons.  Für Facebook, Twitter und Pinterest stehen jeweils verschiedene Designs zur Auswahl. Aber es gibt noch weitere Optionen, mit denen ihr das Aussehen anpassen könnt. Mehr dazu weiter unten. 😉

Der schwerste Teil: Ein Icon auf Font Awesome auswählen. ;-)

Der schwerste Teil: Ein Icon auf Font Awesome auswählen. 😉

Nach dem Klick auf ein Icon kommt man zu einer Seite mit Details. Dort gibt’s die Grafik in größerer Ausführung sowie Hinweise zum Einbinden.

Beispiel:

Dieser kleine Tannenbaum wird so eingebunden:

<i class="fa fa-tree" aria-hidden="true"></i>

(Der <i>-Tag ist vielleicht bekannt. Mehr dazu hier.)
 


 

Font Awesome: Social Media Icons

Meine alten Social Media Icons waren diese schwarzen Pixelgrafiken. Weil ich Probleme mit transparenten Hintergründen hatte, sind die Icons weiß hinterlegt. Auf den ersten Blick sehen die Grafiken ganz okay aus. Sie sind aber im Gegensatz zu Vektorgrafiken nicht skalierbar. Das heißt, dass es z.B. beim Zoomen Bildrauschen und schwammige Schatten statt klaren Linien gibt.

Meine alten Social Media Icons: Keine Vektoren, sondern Pixelgrafiken. Um sie zu verändern, muss ich die Dateien bearbeiten.

Die alten Icons.

Außerdem: Sollte ich eines Tages beschließen, andere Icons oder andere Farben in meinem Design zu verwenden, dann muss ich alles noch einmal erstellen. Mit Font Awesome sind das nur ein paar Klicks und ein paar neue Zeilen Code. Das spart Zeit und Nerven.

Meine neuen Social Media Icons waren dank Font Awesome absolut schnell erstellt. Das Twitter-Icon entspricht nahezu dem Original-Vogel. Das „Facebook-f“ ist gut erkennbar, wenn auch nicht das offizielle Logo. Für das Pinterest-Icon hätte ich auch noch eins ohne Kreis zur Verfügung gehabt. Aber das sah irgendwie seltsam aus. 😉

Meine neuen Social Media Icons dank Font Awesome: Skalierbare Vektoren, scharfe Kanten, anpassbar mit CSS.

Die neuen Icons.

Das ist der Code für die drei zentrierten giftgrünen Social Media Icons:

<div align="center">
<a href="https://twitter.com/Frau_Nerd" target="new" alt="Frau Nerd auf Twitter"><i class="fa fa-twitter fa-3x" aria-hidden="true" style="color:#5bba47;"></i></a>&emsp; 
<a href="http://facebook.de/fraunerd" target="new" alt="Frau Nerd auf Facebook"><i class="fa fa-facebook fa-3x" aria-hidden="true" style="color:#5bba47;"></i></a>&emsp;
<a href="https://www.pinterest.com/fraunerd/" target="new" alt="Frau Nerd auf Pinterest"><i class="fa fa-pinterest fa-3x" aria-hidden="true" style="color:#5bba47;"></i></a>
</div>

Der Link zu Twitter/Facebook/Pinterest wird ganz klassisch um den <i>-Tag mit dem Font Awesome Icon gesetzt. Per style=““ wird die Icon-Farbe vergeben (CSS: Textfarbe, also color). Das „&emsp;“ ist ein breites Leerzeichen, das die Icons voneinander trennt.

 


 

Die Icons von Font Awesome sind beliebig veränderbar

Mit den Icons könnt ihr jetzt alles machen, was ihr wollt. Zumindest was das Aussehen angeht. Beispiele für die Formatierung gibt es hier auf der Website von Font Awesome.

Wie wäre es zum Beispiel, wenn wir den Tannenbaum von da oben größer machen? Das geht mit „fa-3x“ statt „fa“.

<i class="fa fa-tree fa-3x" aria-hidden="true"></i>

Wir können ihn auch grün einfärben. Und ihm zwei Tannenbaum-Freunde dazu setzen. Und vielleicht ist der mittlere Tannenbaum ja pink statt grün. 😉

<i class="fa fa-tree fa-3x" style="color: #5bba47;"></i> <i class="fa fa-tree fa-3x" style="color: #ff4599;"></i> <i class="fa fa-tree fa-3x" style="color: #5bba47;"></i>

Wenn euch jetzt noch nicht schlecht ist: Wie wäre es, wenn sich der pinke Tannenbaum drehen würde? Ja, das geht! Ist eigentlich für Spinner gedacht, geht aber auch mit Tannen.

<i class="fa fa-tree fa-3x" style="color: #5bba47;"></i> <i class="fa fa-tree fa-3x fa-spin" style="color: #ff4599;"></i> <i class="fa fa-tree fa-3x" style="color: #5bba47;"></i>

 

Font Awesome ist flexibel und… ja, ok, awesome

Selbst wenn man den sich drehenden pinken Tannenbaum außer Acht lässt: Font Awesome ist tatsächlich awesome. Die Sammlung umfasst jede Menge nützliche und vielseitige Icons, darunter auch Marken-Logos. Alle diese Icons sind von großartiger Qualität – sowohl in ganz klein als auch in ganz groß.

Das liegt an der mehrfach erwähnten Skalierbarkeit der Vektorgrafiken. Sie ist ein absolutes Plus. Genau wie die Option, sich einfach einen Embed-Code senden zu lassen und nur die Icons einzubinden, die man braucht.

Font Awesome benötigt kein Hosting, liefert hochwertige Icons und ist einfach zu verwenden. Wenn das keine Gründe sind, Font Awesome zu verwenden, dann weiß ich es auch nicht. 😉