Font Awesome in Blogspot einbinden

Hier erfahren Sie, wie Sie die Icon Schriftarten von Font Awesome in Blogspot (Blogger) per HTML einbinden.

Was ist eigentlich Icon Font?
Mit Icon Font können einige Icons und Symbole (wie z.B. YouTube-Icon) per Schriftart eingebunden werden. D.h Sie müssen dazu keine Bilder verwenden.
Die Größe, Farbe, usw. von den Icons können Sie mit Hilfe von CSS anpassen.

Die ganze Liste von den verfügbaren Icons von Font Awesome finden Sie hier.

Wie binde ich Icons von Font Awesome in Blogspot ein?

1) Blogger.com > Vorlage > HTML bearbeiten

2) Mit Strg + F nach <head> im Code suchen:

Nach dem Tag <head> folgenden Code einfügen und auf Design speichern klicken:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

So sieht es dann aus:

Nun können Sie gewünschte Icons in Ihrem Blogger Blog einbinden.

Beispiel: Social Icon im rechten Menu einbinden

1) Blogger.com > Layout > dort im Bereich vom rechten Menu auf Gadget hinzufügen klicken > HTML/ JavaScript Gadget auswählen/hinzufügen

In dem Fenster vom Gadget kann nun der Code eingetragen werden. Hier tragen wir den Code von Facebook Icon testweise ein:

<a href="https://facebook.com" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square"></i></a>

Da ich keine eigene Facebook Seite habe, habe ich einfach die Startseite von Facebook (https://facebook.com) im Rahmen vom Test eingetragen.

So habe ich es gemacht:

Dann im Gadget Fenster auf Speichern klicken > rechts oben auf Layout speichern klicken.
Jetzt können Sie auf die Seite von Ihrem Blogger Blog gehen und prüfen, ob Facebook Icon korrekt angezeigt wird. So sah es beim Test auf itslot.de aus:

Wird das Facebook-Symbol angezeigt und führt es auf die richtige Seite, dann haben Sie es korrekt eingebunden.

Wie kann ich andere Icons einbinden?

Jedes Font Awesome Icon kann nach folgendem Format eingebunden werden:

<a href="http://www-adresse-wohin-der-link-zeigen-soll" title="Linktitel" rel="nofollow"><i class="code-von-icon"></i></a>

Hier:

Linktitel - ist Titel vom Link. Titel können Sie beliebig benennen

code-von-icon - ist Code von dem jeweiligen Icon

Alles Weitere ist in diesem Code für Icon-Einbindung nicht relevant oder braucht keine Erklärung.

Angenommen ich möchte noch YouTube Icon einbinden. So läuft es:

1) YouTube Icon auf http://fontawesome.io/icons/ finden und darauf klicken

2) Sie bekommen für dieses Icon folgenden Code:

3) Den Code vom Icon im Muster-Code einfügen:

<a href="https://www.youtube.com" title="YouTube" rel="nofollow"><i class="fa fa-youtube-square" aria-hidden="true"></i></a>

Dieser Code kann nun an der gewünschten Stelle in Blogspot hinzugefügt werden.

Style von Font Icons anpassen.

Das Facebook-Icon haben wir erfolgreich eingebunden, das Icon ist ja aber etwas klein. Jetzt können wir Icon-Style anpassen.

Mit CSS können Sie die Farbe, Größe, etc. wie folgt ändern:

1) Blogger.com > Vorlage > HTML bearbeiten

2) Mit Strg + F nach <style> im Code suchen und nach <style> folgendes hinzufügen und abspeichern:

.fa-facebook-square {
font-size: 30px;
color: blue;
}

Damit haben wir die Größe und Farbe vom Facebook-Icon geändert.

Mit CSS kann man auch viele andere Eigenschaften von Font Icons ändern (wie z.B. Schatten), aber hier sind einige CSS Wissen notwendig und das ist nicht das Thema von diesem Beitrag.

Font Awesome in Blogspot einbinden

Wie binde ich Icons von Font Awesome in Blogspot ein?

Beispiel: Social Icon im rechten Menu einbinden

Wie kann ich andere Icons einbinden?

Style von Font Icons anpassen.

Kommentar veröffentlichen