WebdesignWordpress

I Fa Fa Icons –
Freie Grafiken für Deine Website

Was sind Fa Fa Icons?

Font Awesome LogoDas Akronym Fa leitet sich von der Webtypografie Font Awesome ab und bietet die Möglichkeit hochwertige Icons auf Webseiten anzeigen zu lassen. Während reguläre Fonts, wie z.B. Arial, Verdana und Times New Roman, nur online angezeigt werden können, wenn diese Schriftarten auf dem Rechner des jeweiligen Besuchers installiert sind, können Webfonts unabhängig davon im Browser angezeigt werden.

Verantwortlich dafür sind die heutigen Browser, die in der Lage sind Webtypografien direkt über den Server aufzurufen. Einzige Bedingung: Die Schriftart sollte zuvor in einer CSS-Datei über das Attribut @font-face definiert sein.

Awesome Font CSS
Ein Auszug der Font Awesome CSS Datei.

Bei der Awesome Font werden jedoch keine Buchstaben, sondern kleine Grafiken hinterlegt, die nun ganz bequem in die Website mit dem i-Tag implementiert werden können. Und da es sich bei diesen Symbolen um Vektor-Grafiken handelt, büßen sie auch bei hochauflösenden Endgeräten, wie z.B. Retina Displays, nichts von ihrer Optik ein.

Anleitung zur Verwendung der Fa Fa Icons in zwei Schritten:

1. Font Awesome Stylesheet in den Header einbinden

Damit Browser das Webfont korrekt darstellen können, muss die Website natürlich einen Pfad zur CSS-Datei aufweisen. Dazu sollte lediglich folgende Zeile in den Header eingebunden werden.

[code] <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
[/code]

In WordPress öffnet man hierfür unter Design > Editor im Admin-Menü die Header.php-Datei und fügt vor dem schließenden Head Tag (</head>) die eben genannte Zeile ein.

2. Fa-Symbol in i-Tag schreiben

Um sich einen Überblick zu den vorhandenen Font Awesome Icons zu verschaffen, sollte man sich unbedingt die Website dazu anschauen: » Font Awesome Icons

Fa-home Icon
Das Fa-Home Icon in verschiedenen Größen.
Fa Fa Icon WordPress Menü
Im WordPress Menü kann der Code einfach als angezeigter Name verwendet werden.

Als Beispiel verwende ich das Piktogramm Fa-Home, das ich auch selber auf meiner Website im Menü verwende. Denn da WordPress normalerweise nicht so ohne weiteres Grafiken im Menü akzeptiert, kommen die Fa-Icons genau richtig! Und so sieht das Fa-Home in Verbindung mit dem i-Tag aus:

[code] <i class="fa fa-home fa-lg"></i>
[/code]

Man könnte anstelle des i-Tag auch ein Span-Tag verwenden. Dann sähe das Ganze so aus:

[code] <span class="fa fa-home lg"></span>
[/code]

In der Klasse sollte demnach fa + das gewünschte Icon, in diesem Falle fa-home + eventuell die Größenangabe stehen. Lg steht für eine Vergrößerung um 33%. Daneben gibt es fa-2x, fa-3x bis hin zu fa-5x, womit eine maximale Verfünffachung des Icons erreicht werden kann. Lässt man die Größenangabe weg, wird die Standartgröße verwendet.

Wie Du siehst, ist es wirklich ganz einfach die Font Awesome Symbols auf eine Webseite einzubinden! Und ich persönlich möchte das Häuschensymbol in meinem WordPress-Menü nicht mehr missen;)

Show More

Klaudija Paunovic

Hier schreibe ich mit Herzblut über alle Themen, die mich interessieren. Schon als Jugendliche schrieb ich für die Schülerzeitung. Es folgte die freie Mitarbeit bei Tageszeitungen wie Express und Rheinische Post. Und auch heute noch fröhne ich meiner Schreibleidenschaft auf diesem Blog. Wenn du mehr über mich erfahren möchtest, gibt es hier noch mehr Infos: »Mehr über mich«

Related Articles

Back to top button