Icon Fonts:

• in (Schriftart) eingebundene Vektorgrafiken
• Ausgabe in Form von Schriftzeichen (Glyphen)
• dienen als Ersatz von grafischen verlustbehafteten Bildern und Sprites
• sollten immer in der PUA oder auf ein semantisch gleiches Zeichen gemappt werden
• werden als Font importiert und im Browser als Schriftart interpretiert

Vergleich

Private Use Area

Vorteile:

• Vektoren: unendlich skalierbar, verlust frei, ohne artefakte
• Nachhaltigkeit: Responsive, für alle Displays (Retina Support)
• Guter Browser Support inkl. IE 7 und Mobile Kompatibilität
• CSS Styling 'on the fly': Größen, Färbung, Textschatten, Hover-States, Transforms & Animationen
• Workflow: Keine Icons in unterschiedlichen Auflösungen bzw. Größen nötig

Außerdem:

• Verringerung von HTTP Requests
• 'Können' Sprite Images gänzlich ersetzen
• Dateigröße sehr gering → Performance Beschleunigung
• Je mehr Icons → desto sinnvoller der Einsatz von Icon Fonts
• Barrierefreiheit: Glyphen werden wie Schriftarten invertiert
• Icon-Font Webapps, machen es möglich schnelle Ergebnisse zu erzielen

Beispiel:

...easy, easy!

Es gibt 3 Methoden!

aber zunächst ab ins CSS:

@font-face {
    font-family: IconFont;
    src: url('font_pfad/icon_font.eot');
    src: local('Company Icons'),
         url('font_pfad/icon-font.eot?#iefix') format('embedded-opentype'),
         url('font_pfad/icon-font.woff') format('woff'),
         url('font_pfad/icon-font.ttf') format('truetype'),
         url('font_pfad/icon-font.svg#fontfile') format('svg');
    font-weight: normal;
    font-style: normal;
}

Methode 1:

Mark-Up Icon Wrap

HTML Deklaration:

<a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>
						

CSS Deklaration:

.icon {
	font-family: 'icon-font';
}

hmmm...

das ist irgendwie blöd und nicht semantisch!

Methode 2:

Data-Icon Attribute

HTML Deklaration:

<a href="shopping-cart.php">
  <span aria-hidden="true" data-icon="s"></span>View Cart
</a>

CSS Deklaration:

[data-icon]:before {
  font-family: icon-font-name; 
  content: attr(data-icon);
  speak: none;
}

Methode 3:

CSS Generated Content

(Empfohlen)

HTML Deklaration:

<a href="shopping-cart.php" class="icon cart">View Cart</a>
						

CSS Deklaration:

.icon:before {
	display: inline-block;  // oder block
	font-family: 'icon-font';
	font-size: 30px;
	color: #333;
}
.cart:before {
	content:'\e201'
}

geht auch besser!

HTML Deklaration:

<a href="shopping-cart.php" class="icon-cart">View Cart</a>
						

CSS Deklaration:

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
}
.icon-cart:before {
	content:'\e101'
}

Private Use Area