Font Awesome Icons als "css content"

veröffentlicht von gülmez am Di., 16.06.2015 - 08:51

In immer mehr Web-Projekten kommen die Icons Font Awesome zur Verwendung.

Eingebunden wird üblicherwiese folgender HTML-Code (Bsp.: das Drupal-Icon):

<i class="fa fa-drupal"></i>

Was ist aber wenn ich keinen HTML-Code einfügen und nur CSS anwenden möchte? Schließlich habe ich nicht immer die Möglichkeit oder Lust den HTML-Code anzupassen?

In diesem Falle kann man einfach die CSS Eigenschaft "content" nutzen. Diese wird nur im Zusammenspiel mit :after und :before verwendet.

Beispiel:

a:before {
   font-family: FontAwesome;
   content: "\f1a9";
}

Anstatt der jeweiligen Klasse für das Icon wird der entsprechende Unicode als Content eingefügt. Eine Liste der Font Awesome Unicodes findet man hier:

http://fontawesome.io/cheatsheet/

Im angegebenen Unicode müssen nur die letzten 4 Zeichen mit einem vorangestellten "\" eingebunden werden (also "\f1a9" stattt "&#xf1a9").

p.s.

Eine weitere Möglichkeit der Einbindung ohne die Verwendung von Unicodes zeigt folgender Artikel:

http://dusted.codes/making-font-awesome-awesome-using-icons-without-i-t…

 

Tags

Neuen Kommentar hinzufügen