Blog

Webseiten skalierbar, im Sinne von zoombar,  zu gestalten scheitert gerne mal bei Icons und Grafiken. Gerade Icons denen ein Textlink nachgestellt ist, sehen bei grösserer Schriftansich häufig schäbig aus. Auch blähen diese Icons unsere Spritedateien auf und sind auch nicht so ohne weiteres einzufärben. SVG scheint bei größeren Grafiken und vor allem bei Infografiken die richtige Wahl zu sein, wenn da nicht wieder unsere geliebte Browserkompatibilität wäre.

Was nun? Wir wollen Icons vor Textlinks haben, die sich einfärben lassen und die auch bei Zoomänderungen noch gut aussehen.

Einen Möglichkeit besteht im Einsatz von @font-face Kits und der Pseudo-Klasse :before. Auch ein Blick in die Unicode-Tabelle (z.B. hier)  kann schon das gewünschte Icon bringen.
Sollte die Unicode-Tabelle keine Lösung bringen, kann man auf eine @font-face Kit zurückgreifen und diese Schrift mit @font-face einbinden (gute Kits kriegt man bei fontsquirrel.com). Mit dem @font-face Kit werden die gesamten Schriften in den wichtigsten Formaten geliefert und eine CSS-Datei zeigt die Einbindung.

Beispiel  (fontsquirrel - modern pictograms)

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

Dann braucht man eigentlich nur noch einen normalen button-Tag und innerhalb ein inline-Element (span) und schon kann man einen Upload-Button mit einem Icon versehen.

.button {
	border: 1px solid #cccccc;
	background: #dddddd;
	padding: 5px 20px;
	color: #0044ff;
	text-shadow: 1px 1px 0 #FFF;
	cursor: pointer;
}

.btn:before {
	font: 18px/0px 'ModernPictogramsNormal', Arial, sans-serif;
}

.Upload:before {
	content: 'A ';
}

.Download:before {
	content: 'D ';
}

.Reload:before {
	content: 'R ';
}

.button:hover {
	color: #E50000;
}

<button class="button"><span class="btn Upload">FotoUpload</span>
<button class="button"><span class="btn Download">Download</span>
<button class="button"><span class="btn Reload">Aktualisieren</span>

Und schon hat man die Button mit dem gewünschten Icon-Effekt. Der geschickte Einsatz des data-Attributs kann dann auch noch CSS-Zeilen bei der Content-Deklaration bringen.