Icon Fonts

Icon Fonts erfreuen sich in letzter Zeit immer größerer Beliebtheit, das liegt an ihren zahlreichen Vorteilen gegenüber den klassischen Icons, die meist als PNG oder teilweise auch als SVG umgesetzt wurden. Zu den wichtigsten Vorteilen gehören die Skalierbarkeit was gerade bei Responsive Webdesign von Vorteil ist und auch für Retina Displays (höhere Pixeldichte) für ein ein scharfes Bild sorgt, aber auch die Farbgebung oder das hinzufügen von Effekten ist mit Hilfe von CSS einfach möglich!

Im Stylesheet ist die Schrift einfach wie jede andere Schrift einzubinden, nutzt man einfach ein <span>-Tag oder vielleicht das <a>- oder <button>-Tag können dort direkt die Icons zum Einsatz kommen.
Beispiel: <a class="awesome" href="/">&#xf015; Home</a>
Hierfür ist lediglich der folgende kurze Part im Stylesheet einzufügen.

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
       url('/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
       url('/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
       url('/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
span.awesome, a.awesome, button.awesome {
  font:normal normal normal 14px/1 FontAwesome;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-decoration:none;
  text-align:center;
}

Oder man nutzt das mitgelieferte Stylesheet welches aber bei einigen älteren Browsern zu Problemen führt
Beispiel: <a href="/"><i class="fa fa-home"></i> Home</a>

Nun noch die Liste der Icons der Version 4.2.0: