Icons im Web ohne Grafiken mittels @font-face

Mit CSS3 ergeben sich viele neue Möglichkeiten: wie wäre es zum Beispiel, anstatt Grafiken auf einer Website nur noch Schrift zu verwenden? Ich finde die Idee cool. Und prinzipiell geht das so: zuerst wird @font-face im CSS verwendet, mit der nachfolgenden Deklaration werden alle Browser bedient, die Schriftart muss in mehreren Formaten vorliegen:

@font-face {
font-family: 'IconFont';
src: url('iconfont.eot');
src: local('IconFont'),
url('iconfont.woff') format('woff'),
url('iconfont.otf') format('opentype'),
url('iconfont.svg#IconFont') format('svg'); }

Nun wird wir die festgelegte Schriftart für eine Klasse definiert:

<style type="text/css">
.staricon { font-family: 'IconPack'; }
</style>

Um nun ein bestimmtes Icon aus dem Schriftsatz zu referenzieren,  wird die grade definierte Klasse normal auf ein Element angewendet:

<div class="staricon">a</div>

2 thoughts on “Icons im Web ohne Grafiken mittels @font-face

  1. Hallo Marcus,

    hast du auch herausgefunden, ob es Programme gibt, mit denen man eine Schrift konvertieren kann?

    Cooler Blog. Hier findet man echt wertvolle Informationen, die einem die Arbeit im Alltag erleichtern können.

    Gruß

    Manthemann

  2. Hallo Marcus,

    hast du auch herausgefunden, ob es Programme gibt, mit denen man eine Schrift konvertieren kann?

    Cooler Blog. Hier findet man echt wertvolle Informationen, die einem die Arbeit im Alltag erleichtern können.

    Gruß

    Manthemann

Schreibe einen Kommentar