Font Awesome in Blogspot einbinden

Anzeige

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:

Font Icon in Blogspot einbinden

 

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:

Icon Schrift in Blogger einbauen

 

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:

 

Blogger Social Icons

 

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:

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

 

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.

Kommentar veröffentlichen