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>