Hallo,
damit du erst mal ein Erfolgserlebnis hast:
1. Paket von Font Awesome herunterladen
http://fortawesome.github.io/Font-Awesome/
und entpacken.
2. Das entpackte Verzeichnis "font-awesome" in das Verzeichnis deiner Webseite kopieren. Die Unterverzeichnisse less und sass kannst du weglassen, wenn du damit nicht arbeitest. Ansonsten nix ändern!
3. Je nach Struktur deiner Webseite und der CSS-Dateien die Datei
font-awesome.css einbinden wie andere CSS-Dateien auch.
4. Font Awesome ist einsatzbereit. Ein erster Test: In den body-Bereich eingeben
Code:
<p><i class="fa fa-coffee"></i></p>
Im Text sollte eine Kaffeetasse erscheinen. Falls nicht ist die CSS-Datei falsch (also nicht) eingebunden worden. Wenn das nicht funktioniert brauchst du gar nicht erst weitermachen.
5. Die Bezeichnung der Symbole findest du auf der Symbolseite von Font Awesome
http://fortawesome.github.io/Font-Awesome/icons/
die ich bereits verlinkt habe, aber doppelt schadet ja nicht. Du musst nur das Wort
coffee durch die Bezeichnung für das gewünschte Symbol austauschen.
6. Um vor jeden Link ein Symbol einzufügen funktioniert z. B. folgendes CSS:
Code:
a:before {
font-family: FontAwesome;
content: "\f08e";
color: red;
display: inline-block;
padding-right: 3px;
}
Das
f08e ist das entsprechende Symbol. Um das zu finden kannst du auf der
Font Awesome-Icon-Seite einfach das gewünschte Icon anklicken, das wird dann angezeigt. Für die Kaffeetasse coffee lautet das zum Beispiel
f0f4
7. Damit das Symbol nur im Fließtext angezeigt wird und nicht bei jedem Link muss vor das a:before nur ein p> gesetzt werden, also
Code:
p>a:before {
font-family: FontAwesome;
content: "\f08e";
color: red;
display: inline-block;
padding-right: 3px;
}
Sofern der Fließtext korrekt in p-Elementen eingeschlossen ist wird auch dort nur das Symbol vor einem Link eingefügt.
Gruss
MrMurphy
