Font Awesome Icons mit CSS Pseudo-Elementen

Mehr als ein Icon - Font Awesome und andere Icon Fonts mit Hilfe von CSS Pseudo-Elementen einfügen - dein CSS-Tutorial zu Font Awesome Icons.Tags: | | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

In diesem CSS Tutorial lernen wir, wie man CSS Pseudo-Elemente mit Font Awesome Icons verknüpft, um vor oder nach einem HTML-Element die Icons deiner Wahl anzuzeigen.

Wir beginnen mit den CSS Pseudo-Elementen ::before und ::after

1. Die CSS Pseudo-Elemente ::before und ::after

Ein CSS Pseudo-Element ist ein HTML-Element, dass im HTML-Code eigentlich gar nicht existiert, sondern nur durch CSS erzeugt wird.

Diese erzeugst du, in dem du in deinem CSS-Code an ein HTML-Element, eine Klasse oder eine ID ::before bzw. ::after direkt dranhängst, also z.B. so bei einer h1-Überschrift:

h1::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
}

Das Ergebnis sollte ein kleiner roter Block vor der Überschrift sein.

Schaun wir uns die einzelnen Zeilen nochmal genauer an:

  • h1::before sagte dem Browser, dass er ein Pseudo-Element vor dem eigentlichen Element erzeugen soll
  • content sagt dem Browser, dass das Pseudo-Element einen Text-Inhalt haben soll (und wenn es nur ein Leerzeichen ist). Ohne dieser Zeile funktioniert das Ganze nicht. Wenn man hier z.B. ‚XXX‘ reinschreibt, steht auch ‚XXX‘ in dem Quadrat drin.
  • display: inline-block lässt das Pseudo-Element in der gleichen Zeile anzeigen statt darüber
  • width, height und background-color bestimmen das Aussehen

Das gleiche Prinzip lässt sich auch auf das CSS Pseudo-Element ::after anwenden – nur wird das Pseudo-Element dann eben hinter dem HTML-Tag eingefügt:

h1::after {
  content: 'XXX';
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: green;
}

Beides gemeinsam ergibt dann für ein HTML-Element h1 mit dem Inhalt „test“ folgendes Bild:

CSS icon font awesome Pseudo Elemente ::before und ::after

Anmerkung: Es gibt bestimmte HTML-Elemente, bei denen die Pseudo-Elemente ::before und ::after nicht funktionieren. Beim <img>-Tags funktionieren sie z.B. meist nicht, ebenso wenig bei <input>-Tags wie z.B. Textfeldern.

Aber was bringt uns das nun?

Unsere CSS Pseudo-Elemente können mit Hilfe vom CSS-Befehl position nach Belieben herumgeschoben bzw. auch sonst verändert werden. Das ermöglicht es, auf vergleichsweise einfache Art und Weise (und ohne unseren HTML-Code unnötig aufzublähen) allerhand grafische Gestaltungsmöglichkeiten.

Aber es gibt noch einen Grund, warum CSS Pseudo Elemente so interessant sind: Icons mit Font Awesome.

2. Mehr als ein Icon: Font Awesome

Vor einiger Zeit kam eine interessante neue Idee in der Webprogrammierung auf, die ein altes Problem sehr elegant zu lösen vermochte:

Viele Websites verwenden sehr ähnliche Grafiken (Icons) für immer die gleichen Aufgaben, wie z.B. „Schicke uns eine Email“ oder „Ruf uns an“. Da ist es sehr mühsam, wenn man all diese kleinen Grafiken bei jeder neuen Website wieder einzeln hochladen muss. Außerdem verzögern lauter kleine Bilder auch die Ladegeschwindigkeit der Website.

Irgendjemand hatte dann die geniale Idee, dass man ja diese ständig benutzten Grafiken (Icons) auch einfach als Schriftart codieren kann. Anstatt also z.B. ein ‚Ä‘ anzuzeigen, zeigt die Schriftart dann z.B. das Symbol für einen Telefonhörer oder einen Krankenwagen an.

Eine einzige Schriftart einbinden statt Hunderten kleinen Icons, das erspart schonmal viel Arbeit.

Aber es gibt noch einen nicht zu unterschätzenden Vorteil: Man kann die Icons ganz einfach über die Schriftfarbe color umfärben.

Ziemlich feine Sache, unsere Icon Fonts.

Von denen gibt es übrigens mehrere, und theoretisch kann man sich auch selbst welche erstellen – aber wir sehen uns hier erstmal die mit Abstand bekannteste und am meisten genutzte Icon font an: Font Awesome.

2.1 Wie du Font Awesome Icons für deine Website aktivierst

Die Font Awesome Icons kannst du zwar theoretisch herunterladen, aber meist wirst du sie über einen sogenannten CDN verlinken.

2.1.1 Was ist ein CDN, und warum macht er Sinn?

Ein CDN (= „Content Delivery Network“) besteht aus mehreren Servern, die über die ganze Welt verteilt sind und alle über eine Kopie des gleichen Inhalts verfügen.

Wenn der Webserver deiner Website in Österreich steht und ein Website-Besucher aus Österreich oder Deutschland kommt, dann ist der Übertragungsweg relativ kurz.

Besucht jemand deine Website aus Indien, dauert das – aufgrund der physischen Entfernung – schon erheblich länger.

Ein CDN würde diesen Besucher dann auf den geographisch am nächsten liegenden Server mit einer Kopie der gewünschten Inhalte umleiten.

So lädt die Website immer möglichst schnell.

2.1.2 Die Icons von Font Awesome über einen CDN einbinden

Für bestimmte oft verwendete Bibliotheken (wie jQuery oder eben Font Awesome)  gibt es frei zugängliche CDN-Netzwerke.

Wenn du in der Suchmaschine deiner Wahl „Font Awesome CDN“ eingibst, findest du mehrere Möglichkeiten. Nehmen wir an, du wählst das zum Zeitpunkt der Erstellung dieses Tutorials erste Ergebnis aus, cdnjs.com, dann solltest du in etwa das hier sehen:

Icon Font Awesome über CDN einbinden

Es handelt sich um eine Liste mit verschiedenen Varianten von Font Awesome.

Für uns relevant sind erstmal nur diejenigen mit den folgenden Endungen:

  • all.min.css
  • brands.min.css
  • solid.min.css
  • regular.min.css

Die Variante mit der Endung all.min.css beinhaltet alle Icons, die anderen drei nur jeweils einen Teil aller Icons.

Verwendest du ohnehin nur einen bestimmten Teil, so macht es Sinn, nur diesen zu verlinken – deine Website wird so schneller laden.

Aber wählen wir für den Start erstmal all.min.css (die erste Variante in oranger Farbe).

Kopiere den Link, den werden wir gleich brauchen.

Dann gehst du zu deiner .html-Datei – dort werden wir Font Awesome nun im <head>-Bereich einbinden.

Da es sich bei Font Awesome um eine .css-Datei handelt, funktioniert die Einbindung genau gleich wie bei unserer style.css, nur der Pfad zur Datei ist ein anderer:

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>test</h1>
    </body>
</html>

Das wars – du hast Font Awesome eingebunden.

Nun sind wir bereit für unser erstes Icon mit Font Awesome!

2.2 Wie du Icons mit Font Awesome auswählst

Etwas weiter oben haben wir ja gesagt, dass Font Awesome eine Icon font ist, das bedeutet statt Buchstaben usw. besteht die Icon Font aus kleinen Icons.

Aber woher weißt du jetzt, welcher „Buchstabe“ welches Icon ist?

Dazu bietet Font Awesome praktischerweise eine Art „Schummelzettel“, auf Englisch „Cheat sheet“ an.

Du findest die Auflistung, wenn du in die Suchmaschine deiner Wahl „Font Awesome Cheat sheet“ eingibst, oder gleich direkt über diesen Link. Die Seite schaut in etwa so aus:

Icon Font Awesome Cheat sheet

Über den Icons kannst du zwischen den Kategorien wählen:

  • solid
  • regular
  • brands

Falls dir das bekannt vorkommt – ja, das waren die Teil-Mengen der Icons, die wir im Punkt davor statt all.min.css auswählen konnten.

Wenn du also z.B. nur Icons aus der Kategorie „solid“ verwendest, dann kannst du statt all.min.css auch nur solid.min.css in deine HTML-Seite einbinden und verbesserst deine Website-Ladgeschwindigkeit.

Such dir nun ein Icon, das dir gefällt, aus der solid-Liste aus.

Angenommen, dir gefällt als jemand der Programmieren lernen will das Icon von Font Awesome namens „code“ mit dem Icon-Code „f121“ (der Icon-Code steht immer rechts daneben und beginnt immer mit einem „f“).

Du hast ein Icon, das dir gefällt? Wunderbar, dann lass uns loslegen!

2.3 Wie du Icons mit Font Awesome in deine Website einfügst

Nun brauchen wir wieder unsere CSS Pseudo-Elemente von vorhin, nämlich ::before bzw. ::after.

Font Awesome Icons werden grundsätzlich über diese CSS Pseudo-Elemente eingefügt.

Wenn wir dieses Icon nun vor unserer h1-Überschrift einfügen wollen, ist das gar nicht so schwer. Das geht dann so:

h1::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f121';
  font-weight: bold;
}

Das Ergebnis:

Icon Font Awesome in CSS einfügen

Die einzelnen Zeilen kurz erklärt:

  • font-family stellt die Schriftart für dieses Pseudo-Element auf Font Awesome um.
  • content bestimmt, welches Zeichen der Schriftart angezeigt werden soll. Achtung auf das „\“ vor dem Icon-Code!
  • font-weight: bold stellt den Text auf fett um. Das ist wichtig bei allen Icons in der Kategorie „solid“.

Willst du nun die Größe des Icons verändern, kannst du das über die Schriftgröße (CSS-Befehl font-size) tun. Die Icon-Farbe veränderst du über den CSS-Befehl color:

h1::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f121';
  font-weight: bold;
  font-size: 100px;
  color: orange;
}

Ein Riesen-Icon:

Icon Font Awesome in CSS einfügen Farbe und Größe ändern

Hätten wir jetzt zwei h1-Überschriften auf unserer HTML-Seite, würden alle das gleiche Icon vor sich haben (und in unserem Fall auch die XXX mit grüner Box aufgrund von dem ::after.

Wollen wir das nicht, können wir statt h1 mit Klassen und IDs arbeiten.

Hier die sinnvollste Aufteilung aller Code-Bestandteile zu Icon Font Awesome:

3. Wie du Icons mit Font Awesome am sinnvollsten in dein CSS schreibst

Am wenigsten Arbeit (und die schnellsten Ladezeiten deiner Website) hast du, wenn du dir einen CSS-Selektor anlegst, der die Einstellungen für Font Awesome Icons vornimmt, die immer gleich sind. Wir relativeMeister nennen diesen meistens „fac“:

.fac::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
  color: orange;
  margin-right: 10px;
}

Für die einzelnen Icons, die ja meist jeweils unterschiedliche Icon-Codes haben, erstellst du jeweils einen ID-Selektor, z.B. so:

#baby::before {
  content: '\f77c';
}
#adult::before {
  content: '\f554';
}

Und im HTML-Code auf deiner .html-Seite setzt du das Ganze dann so ein:

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="fac" id="baby">test</h1>
        <h1 class="fac" id="adult">test2</h1>
    </body>
</html>

Alle Elemente, die Icons bekommen sollen, haben also die „fac“-Klasse, und zusätzlich noch die ID, die das konkrete Icon über „content“ und den jeweiligen Icon-Code bestimmt.

So kannst du mit vergleichsweise wenigen Code-Zeilen (bessere Seitengeschwindigkeit + einfachere Wartung) viel erreichen.

Was aber ist, wenn Icons z.B. im header-Bereich anders aussehen sollen als im Footer?

Das kannst du so lösen (Wir nehmen an, der Header-Bereich hat die ID „header“:

.fac::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
  color: orange;
  margin-right: 10px;
}
#baby::before {
  content: '\f77c';
}
#adult::before {
  content: '\f554';
}
#header .fac::before {
  font-size: 20px;
}

Alle HTML-Elemente mit der Klasse „fac“ haben eine Schriftgröße von 40px, außer diejenigen, die sich innerhalb vom HTML-Element mit der ID „header“ befinden.

Da „#header .fac::before“ genauer ist als „.fac::before“, setzt sich dieser Selektor laut unseren CSS-Dominanzregeln durch.

Und damit beenden wir unsere kurze Einführung in Icons mit Font Awesome auch schon wieder.

Viel Freude mit all den Icons 🙂

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.