Icons als Schrift: So holst du dir Font Awesome für deine Website
Suchst du nach Icons, die kostenlos und noch dazu leicht zu erstellen und zu verändern sind? Dann wirst du bei den Icons von Font Awesome garantiert fündig!
In diesem Artikel kannst du darüber lesen,
was Font Awesome eigentlich ist und warum die Icons so toll sind,
was es mit den gratis vs. bezahlten Icons auf sich hat, und
wie du Font Awesome auf deiner Website oder deinem Blog einbaust.
Inhaltsverzeichnis:
Was ist Font Awesome?
Font Awesome ist eine Sammlung von Icons, die keine Bilder sind, sondern als Schrift programmiert sind. Das Tolle daran: Du kannst sie wie eine normale Schriftart beliebig groß oder klein skalieren und sie in deinen eigenen Farben einfärben.
Dadurch ist es möglich, den Look der Icons anzupassen, ohne dass du dich in Bildbearbeitung auskennen musst.
Du bist auch nicht mehr daran gebunden, bestimmte Größen von Bildern zu haben - Font Awesome lässt sich als Schrift beliebig vergrößern, da es sogenannte Vektoren sind.
Die Icons werden über HTML-Snippets eingefügt. Alles, was Stil und Design ist (also Größe, Farbe, Zeilenabstand usw.) kannst du dann über CSS bearbeiten.
Du kannst dir die verfügbaren Icons auf der Website von Font Awesome ansehen:
Wieso ist die Awesome Font eigentlich so awesome?
Sehr gute Frage :-)
Weil du statt eines solchen Doppelpunkt-Smileys wie oben einen richtigen Smiley tippen kannst. Oder ein Telefon.
Und zwar ohne groß nach irgendwelchen Bildern zu suchen.
(Mehr zur Geschichte des Namens “Font Awesome” und dem Gründer findest du ganz unten im Artikel!)
Seitdem alle per Smartphone mit Whatsapp und Instagram an Emojis gewöhnt sind, sind Bilder ein bevorzugter Teil der Kommunikation. Visuell ist besser - ein Icon erklärt oft mehr als viele Worte.
Bei Font Awesome findest du gleich eine ganze Menge davon.
Warum Font Awesome noch awesome ist?
Alleine der großen Auswahl wegen - und weil es eine ganze Palette der Icons auch gratis gibt. Dazu und was es genau mit den Preisen auf sich hat kommen wir gleich noch.
Die Icons kannst du direkt bei der Awesome Font Website suchen:
Es ist für alle was dabei.
Egal, ob du einen Blog über Achtsamkeit hast, gefragter Architekt bist oder Kindergeburtstags-Dienstleistungen verkaufst. Ich habe zum Beispiel nach Einhorn-Icons gesucht und diese hier gefunden:
Nur beim Thema Spaghetti konnte ich nichts finden - aber dafür sind Fleischbällchen-Wolken aufgetaucht:
Du siehst: Deiner Kreativität sind mit Font Awesome keine Grenzen gesetzt!
Artikeltipp: So baust du ein Mooboard für dein Projekt
Noch mehr Zwecke, bei denen die Awesome Font dir hilft
Wofür brauchst du denn eigentlich Icons bzw. An welchen Stellen kannst du sie einsetzen? Hier die Zwecke, bei denen ich das empfehle:
Auf Landing Pages, Startseiten (Homepages) von Website und Verkaufsseiten: Du musst keine Bilder verwenden, sondern kannst einfach zum Text ein passendes Icon wählen.
Beim Platz sparen auf mobilen Seiten: Je mehr Wörter du durch Icons ersetzt, desto weniger lang sind deine Sätze.
Was kostet die Awesome Font?
Du kannst eine eingeschränkte Anzahl gratis verwenden oder dir einen Premium-Account holen - es ist also ein sogenanntes Freemium-Modell.
Wenn du ganz neu mit den Awesome Fonts loslegst, teste am besten erstmal mit den kostenlosen Icons. Vielleicht stellst du ja fest, dass du gar keine der Icons für dein digitales Projekt brauchst.
Was ist der Unterschied zwischen der gratis und der bezahlten Version von Awesome Font?
Bei der bezahlten Pro-Version gibt es neben der größeren Anzahl der Icons auch noch ein paar Extra-Vorteile.
Zum Beispiel diese schicken Duotone-Icons:
Bei der Gratis-Version sind zur Zeit (Stand: Januar 2020) rund 1.500 Icons erhältlich:
Beachte wie bei allen gratis Schriften auf jeden Fall die gültigen Lizenzen, sodass du die Icons immer rechtskonform verwendest.
Bei der Pro-Version hast du die Qual der Wahl zwischen über 6.000 der kleinen Bildchen.
Außerdem hast du beim Pro-Account die Möglichkeit, noch mehr Einstellungen direkt online zu ändern. Mehr über die Features der Mitgliedschaft kannst du direkt auf der Website von Font Awesome lesen.
Was kostet die Pro-Version von Font Awesome?
Aktuell kostet die Pro-Version 99 Dollar im Jahr (Januar 2020). Dafür bekommst neben viel mehr Icons auch Support durch “echte Menschen” und regelmäßig neue Icon-Pakete, wenn es eine neue Version von Font Awesome gibt.
Wie baue ich Font Awesome in meine Website ein?
Es ist ziemlich leicht, die Icons für deine Website zu verwenden.
Hier habe ich zusammengestellt, wie du die Icons für die Website-Systeme Wordpress, Squarespace, Jimdo und Shopify* anlegst. Aber auch für viele andere Website-Systeme funktioniert das ziemlich gut.
So verwendest du die Awesome Font bei Wordpress
Eine kurze Beschreibung des Einbindens von Font Awesome per Plugin oder manuell findest du bei Elbnetz.
Im Zuge der DSGVO gehst du sicher, wenn du die Schriften direkt bei dir hochlädst, anstatt auf einen fremden Server verweist.
Eine ausführliche Schritt-für-Schritt Anleitung dazu findest bei der Wordpress-Spezialistin Annika Gievers.
So baust du Font Awesome bei Squarespace ein
Du hast eine Squarespace-Seite oder willst eine bauen?
Finde ich sehr gut! Wie du bestimmt weißt, wenn du diesen Blog öfter liest, bin ich absoluter Squarespace-Fan (Artikeltipp: Ist Squarespace das Richtige für mich?).
Wie holst du dir denn nun die Icon-Schrift auf deine Squarespace-Seite?
Praktischerweise habe ich einen Artikel darüber geschrieben, wie du Font Awesome bei Squarespace verwendest: So baust du Font Awesome Icons bei deiner Squarespace Website ein.
Falls du Fragen dazu hast, schreib sie gerne unten in die Kommentare.
So richtest du die Awesome Font bei anderen Website-Systemen (Jimdo, Shopify*, etc.) ein
Das Tolle ist: Weil die Icons eben eine Schrift - und keine Bilder - sind, kannst du sie auch ganz normal überall dort installieren, wo du eigene Schriften verwenden kannst.
Google dazu am besten “eigene Schriften bei XY verwenden” oder “use custom fonts with XY” für das Programm oder Tool, das du verwendest. Für sehr viele Website-Systeme gibt es die Möglichkeit, Schriften direkt hochzuladen, sodass du sie nicht jedes Mal online abrufen lassen musst.
Im Blog Expanding Jimdo gibt es beispielsweise einen Artikel auf Englisch darüber, wie du eigene Schriftarten bei Jimdo verwendest.
Wenn du einen Online Shop bei Shopify* hast und Font Awesome verwenden möchtest, schau dir diesen englischen Artikel vom Theme-Anbieter We Are Underground an, wie du Font Awesome für Shopify per CSS einrichtest. Wenn du lieber ein Video für eigene Schriften bei Shopify ansehen willst, hilft dir Out of the Sandbox, die ebenfalls Themes für Shopify* anbieten.
Noch mehr zu Font Awesome & Icons
Zu Font Awesome gibt es verschiedene Ressourcen, die dir helfen, damit zu arbeiten.
Es gibt zum Beispiel ein Cheatsheet, bei dem du nach Icons suchen und direkt den HTML-Code anzeigen lassen kannst (von einem Drittanbieter).
Wie lange gibt es Font Awesome schon?
Die 5. Version ist im Dezember 2017 herausgekommen. Die Geschichte von Font Awesome geht aber noch Jahre weiter zurück.
Der Gründer Dave Gandy hatte Font Awesome zunächst für Twitter Bootstrap erstellt, inzwischen wird die Schrift aber auf einer gigantischen Anzahl an Websites und Web-Projekten verwendet.
Gemäß Wappalyzer hat Font Awesome zur Zeit 38% Marktanteil unter den Font Scripts, eine beeindruckende Zahl nach dem ersten Platz Google Fonts mit 57,5% Marktanteil (Stand: 13. Januar 2020).
Dave Gandy, der Macher von Font Awesome, schreibt auf seinem LinkedIn-Profil:
“Font Awesome ist ein Open Source Icon-Paket und CSS Toolkit. Es war Githubs erfolgreichstes neues Open Source Projekt im Jahr 2012 und ist aktuell unter den Top 10 Projekten überhaupt. Font Awesome ist aktuell auf 47 Millionen Websites live und die Hälfte der Web Developer weltweit verwendet uns” (übersetzt aus dem Englischen; Stand: Januar 2020).
Vor über zwei Jahren hat der Font-Awesome-Gründer übrigens eine Kickstarter-Kampagne zu Font Awesome 5 gestartet, die statt der geplanten 30.000 Dollar über eine Million Dollar einbrachte. Wenn es dich interessiert, schau dir das witzige Kampagnen-Video dazu an.
Wie kam die “Awesome Font” zu ihrem Namen?
Bei einem Interview mit Impress Pages hat Dave Gandy Antworten zur Geschichte von Font Awesome gegeben. Es hat mit einem Fort zu tun!
Bei LinkedIn ist Dave Gandy auch mit Fort Awesome (und einem ziemlich coolen pixeligen Schloss-Logo) vertreten.
Was, wenn mir die Icons nicht gefallen? - Alternativen zur Awesome Font
Eine sehr gute alternative Quelle für Icons ist Creative Market*, wo du Unmengen. Allerdings sind diese dann Bilder und keine “Schriftart” wie die Awesome Font.
Eine direkte Alternative zu Font Awesome sind die Material Fonts, die du unter anderem über Google Fonts integrieren kannst.
¯\_(ツ)_/¯
Falls du dich das schon die ganze Zeit gefragt hast:
Was ist überhaupt ein Icon?
Icons sind grafische Symbole zur Anwendung am Computer, welche für einen Begriff, Ausdruck oder ein Thema stehen. Icons können auch abstrakte Begriffe oder Ideen verdeutlichen, für deren Beschreibung man sonst viele Wörter bräuchte.
Historisch waren Icons meist Bilder, wobei Anbieter wie Font Awesome den Vorteil bieten, dass die Icons nicht Bilddateien, sondern als Schrift programmiert sind.
Was ist eigentlich der Unterschied zwischen Icons und Emojis?
Sowohl Icons als auch Emojis sind Ideogramme. Ein Ideogramm ist laut Duden ein “Schriftzeichen, das nicht eine bestimmte Lautung, sondern einen ganzen Begriff vertritt (z. B. bei Hieroglyphen)”. Das heißt, sie stellen vereinfacht Objekte, Ideen oder Bedeutungen dar.
Icons werden bei digitalen Projekten oft mit einem Handlungsaufruf, dem sogenannten Call-to-action, verbunden.
Ein typisches Set-up auf Startseiten, das du sicher schon einmal gesehen hast, sind drei Punkte mit Links und einem Icon.
Emojis kommen ursprünglich aus Japan. Gemäß Encyclopædia Britannica baute Apple 2007 eine versteckte Emoji-Tastatur in das erste iPhone ein - die aber schnell von den amerikanischen Usern entdeckt und verwendet wurde. Heutzutage haben alle Smartphones eine große Menge an Emojis zur Verfügung.
Was ist der Unterschied zwischen Emojis und Emoticons?
Emoticons sind ganz einfach die Gesichter und Figuren, die du direkt selbst an der Tastatur mit Satzzeichen etc. tippen kannst, zum Beispiel ;-). Der Name ist eine Zusammensetzung von “emotion icon”, das dann zu Emoticon wurde.
Es gibt neben den bekannten Smileys wie :-( , die man meiste mit schrägem Kopf lesen muss, auch kompliziertere Emoticons:
(~_^) ¯\_(ツ)_/¯ ╭∩╮（︶︿︶）╭∩╮ (ᵔᴥᵔ) (｡◕‿◕｡)
Emojis sind dagegen richtige Bilder, die allerdings von Computern als Text angesehen werden, weil sie als Unicode erstellt worden sind. Deswegen musst du auch die aktuelle Version, sprich Schriftart, der Emojis, installiert haben, um sie anzeigen zu lassen.
Wenn du die Standard-Emojis eines Macs/Apple-Computers für deine Website verwendest, können sie zum Beispiel an einem Windows-PC bzw. anderem Browser ganz anders aussehen. Ganz einfach, weil die Emoji-”Schriftart” dort eine andere ist.
Falls du weitere Fragen hast oder erzählen willst, wie dir die Icons von Font Awesome gefallen, schreib mir gerne unten in den Kommentaren!
Diese Artikel findest du bestimmt auch interessant:
