30
Mär

Icon Fonts – Wie werden sie eingebunden und visuell gestaltet

30.03.2012 / Coding, Tips, Trends / 2 Kommentare


Nach der Einführung in das Thema Icon Fonts und den damit verbundenen Möglichkeiten und Vorteilen, wird der heutige zweite Teil sich der Einbindung eines Icon Font Sets in den HTML-Code und der Gestaltung mittels CSS widmen. Anhand der im weiteren Verlauf erstellten Schritt-für-Schritt Anleitung sollte ein Nachvollziehen dieser Vorgehensweise, selbst für ungeübte Anwender, kein Problem darstellen. Ein Gastbeitrag von Heiko Stiegert

Als allerersten Schritt müsste man sich natürlich basierend auf den konzeptionellen Vorgaben eines Projektes entsprechend für ein geeignetes Icon Font Set entscheiden, welches man verwenden möchte. Dieses sollte dann idealerweise in einen font-Ordner heruntergeladen werden.

Wie werden Icon Fonts eingebunden?

Der Einfachheit halber wird hier das im ersten Teil dieses Artikel-2-Teilers vorgestellte Icon Font Set »Font Awesome« verwendet. Diese liegt in allen relevanten Formaten (.woff, .eot, .ttf,…) vor, womit dieses Icon Font Set von allen relevanten Browser- und Betriebssystem-Versionen korrekt umgesetzt wird. Damit sie auf der Webseite eingesetzt werden kann, muss die Schrift muss zuerst über die @font-face-Regel mit der src-Eigenschaft wie folgt geladen werden.

@font-face {
	font-family: 'FontAwesome';
	src: url('../font/fontawesome-webfont.eot');
	src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/fontawesome-webfont.woff') format('woff'),
	url('../font/fontawesome-webfont.ttf') format('truetype'),
	url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
	url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

Diese Zuweisung der Schriftformate für die Schriftfamilie »Font Awesome«, könnte man in einer separaten CSS Datei mit gleichnamiger Bezeichnung anlegen und auf diese im Header der HTML-Datei wie folgt referenzieren.

<link rel="stylesheet" href="../css/font-awesome.css">
</link>

Um zusätzliche HTTP-Requests zu sparen, kann man darauf aber auch verzichten die Zuweisung der Schriftformate für die Schriftfamilie auch in der allgemeingültigen CSS-Datei, in der auch eure anderen CSS-Eigenschaften definiert wurden, anlegen. Wie werden die Icons dargestellt und gestaltet? Als praktisches Anwendungsbeispielhierfür, kann man bspw. auf eine sogenannte »Vorteile-Box«, wie sie häufig von Onlineshop-Betreibern, Geldinstituten oder Versicherungen verwendet werden, verweisen. Im Fall von Check24 werden auf der Startseite in einer solchen Box ausgewählte FAQs mit Häkchen abgebildet, welche bisher meisten über eine Sprite-Grafik dem jeweiligen Listenpunkt als gestalterisches Hintergrund-Element hinzugefügt werden.

Abbildung 01: Beispielscreen der Webseite von Check24 und der darin enthaltenen und für das folgende Beispiel relevanten »Vorteile-Box« mit Häkchen

Abbildung 01: Beispielscreen der Webseite von Check24 und der darin enthaltenen und für das folgende Beispiel relevanten »Vorteile-Box« mit Häkchen

Um jetzt vom Icon Font Set »Font Awesome« das Häkchen als Icons abbilden zu können, bedarf es im HTML-Code nun lediglich noch der entsprechenden Klasse dafür und die Grundlage ist gelegt. In diesem Fall ist es von der Beschreibung her, die fast selbsterklärende Klasse »icon-ok«. Diese wird noch eine weitere für alle Icons allgemein gültige Klasse »icon«, die sämtliche Eigenschaften der Ausrichtung abbildet, die für alle Icons gleichermaßen zutreffen und somit von den individuellen Klassen und den jeweiligen Eigenschaften getrennt werden können und somit nur einmal angelegt werden müssen. Sollten sich diese verändern, muss man die Neuanforderungen an die Icon-Eigenschaften nur an einer Stelle und nicht bei jedem Icon einzelnen neu definieren. Für die angesprochene Liste mit Häkchen innerhalb einer solchen »Vorteile-Box«, könnte dies zu folgenden HTML-Code führen.

<ul>
	<li class="icon icon-ok">Lorem ipsum dolor sit amet eos et an</li>
	<li class="icon icon-ok">At vero eos et accusam et justo erat</li>
	<li class="icon icon-ok">Stet clita kasd gubergren sanctus est</li>
	<li class="icon icon-ok">Magna aliquyam erat, sedam dolor sit </li>
	<li class="icon icon-ok">Takimata sanctus est elitr ero eos et</li>
</ul>

Wie erkennbar ist, wird den jeweiligen Listenpunkten kein zusätzlichen HTML-Element hinzugefügt, welches dieses Häkchen (siehe Abbildung 02) abbilden könnte.

Abbildung 02: Detailansicht eines Icons von »Font Awesome« mit stark vergrößerten Ausmaßen

Abbildung 02: Detailansicht eines Icons von »Font Awesome« mit stark vergrößerten Ausmaßen

Wie man trotzdem das gewünschte Ergebnis erzielt ohne dabei auf Hintergrundgrafiken zurückgreifen zu müssen, wird im folgenden Arbeitsschritt beschrieben. Wie werden Icon Fonts visuell gestaltet? Für die allgemeine Ausrichtung der Icons vor den jeweiligen Texten, werden in der Klasse »icon« folgende Eigenschaften zusammengefasst. Diese sorgen dafür, dass sie sich in einer Linie mit dem Text befinden und keine Block-Eigenschaften besitzen, was natürlich je nach Anforderungen modifiziert werden kann oder aber auch das sie sich an die Ausmaße (Höhe, Breite) des ihm zugewiesenen Elementes orientieren. Die sagen wir mal, wichtigste Eigenschaft ist allerdings die hier letzte CSS Eigenschaft. Nämlich die Zuweisung der anfangs angelegten Schriftfamilie »Font Awesome«.

.icon {
  	display: inline;
  	width: auto;
  	height: auto;
  	line-height: inherit;
  	vertical-align: baseline;
  	background-image: none;
  	background-position: 0% 0%;
	background-repeat: repeat;
  	font-family:"FontAwesome";
}

Da für dieses Beispiel wie bereits erwähnt kein zusätzlicher HTML-Code erzeugt werden soll, wird auf das Pseudo-Element »:before« zurückgegriffen . Dieses ermöglicht es über die Eigenschaft »content«, Inhalte wie die für die unterschiedlichen Icons notwendigen Zeichen (»\f00c« für das Häkchen) umzusetzen. Diese können dann mittels entsprechender Eigenschaften innerhalb des relativ ausgerichteten Listenpunkten, mit dem Wert »absolut« vor dem Text des Listenpunktes ausgerichtet werden. Man kann natürlich auch auf diesen reduzierten Ansatz verzichten und ein zusätzliches Element anlegen, welches diese Eigenschaften bekommt. Der Einsatz eines Pseudo-Elementes ist dann natürlich nicht mehr notwendig. Vorteil, diesen Ansatz können dann auch die älteren Versionen des Internet Explorers verstehen, denn die Pseudo-Element »:before« und »:after« können nur vom IE9 und teilweise auch vom IE8 korrekt umgesetzt werden.

.icon-ok:before { 
	content:"\f00c"; 
	display: block;	
	position: absolute;
	left:1em;
	top:0;
	width:2em;
	height:2em;
}

Wer also für den IE6 & IE7 nicht mehr optimieren muss, kann also getrost auf diese reduzierte Variante zurückgreifen. Da das über das Zeichen »\f00c« abgebildet Häkchen bisher nicht sonderlich sehenswert ist und der »Vorlage« aus Abbildung 01 noch nicht sonderlich nahe kommt, werden dem Element weitere Eigenschaften zugewiesen. Dazu gehört unter anderem das Anlegen eines hellgrünen Hintergrundes mit dunkelgrüner Umrandung, weißer Schriftfarbe und runder Ecken. Diese sind halb so groß wie die Breite und Höhe, da sich so ein Kreis ergibt. Letztendlich wird dem Häkchen noch ein dezenter Textschatten hinzugefügt.

.icon-ok:before { 
	...
	font-weight:bold;
	color:#FFF;
	background-color:#afd106;
	border:.125em solid #99b03b;
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
	border-radius:1em;
	-webkit-text-shadow: 0  .15em 0 #99b03b;
	-moz-text-shadow: 0  .15em 0 #99b03b;
	text-shadow: 0  .15em 0 #99b03b;
}

Diese wenigen CSS Eigenschaften führen dann zu einem Ergebnis, welches sich durchaus sehen lassen kann. Die »Vorteile-Box« im rechten Teil der Abbildung 03 sieht aus, als würde sie Hintergrundgrafiken verwenden.

Abbildung 03: Darstellung des Häkchens innerhalb der Checkliste auf Basis des Icon Fonts »Font Awesome«

Abbildung 03: Darstellung des Häkchens innerhalb der Checkliste auf Basis des Icon Fonts »Font Awesome«

Die Vergrößerung dieses Icons im linken Bereich der Abbildung zeigt, dass diese ohne Verlust der Qualität einhergeht und somit eine echte Alternative für Sprite-Grafiken darstellt.

Welche Browser unterstützen Icon Font Sets?

Diese Frage kann natürlich nicht pauschal beantwortet werden, weil dies in erster Linie davon abhängig ist, in welchen Schriftformat ein solches Icon Set vorliegt und welche Elemente (HTML4.01 vs. HTML5) und natürlich auch welche gestalterischen Eigenschaften (CSS2.1 vs.CSS3) zur Umsetzung herangezogen werden. Das hier verwendete Icon Font Set »Font Awesome« wird bis hinunter zum IE8 von allen aktuell relevanten Browserversionen korrekt umgesetzt.

Abbildung 04: Browserunterstützung der Icon Fonts von »Font Awesome«

Abbildung 04: Browserunterstützung der Icon Fonts von »Font Awesome«

Ich hoffe Euch hat dieser kleiner Artikel-2-Teiler zum Thema Icon Fonts gefallen und Euch unter Umständen dazu inspiriert sich mit diesem zugegebenermaßen noch recht neuen aber dennoch interessanten Thema auseinanderzusetzen.

1.

Das Icon wird in den ul’s nicht angezeigt. Es wird das normale bullet angzeigt.

Ich benutze Firefox 11 auf Linux Mint 11.

2.

@foobar: Die Fehldarstellung basierte auf einem Bug eines Plugins. Das hier vorgestellte Beispiel funktioniert wunderbar und das in den hier beschriebenen Browser(versione)n.