Kostenlose Web Icons

Kostenlose Web Icons

Immer wieder trifft das Problem die Designer und Webmaster wenn sie Icons in die Seite einbauen. Man nimm welche aus eigener Sammlung und passt sie an, entwickelt was neues oder man nimm welche aus den Bestehenden Sammlungen wie Famfamfam und anderen Quellen. Seit kurzen erschien eine Web Symbol Sammlung an meist benutzten Icons die ausreichen um Wichtige Elemente zu symbolisieren. Das Geniale ist, dass es eine WebFont ist die skalierbar ist, einfach zu integrieren ist, einfach zu nutzen weil man braucht nur Buchstaben um die Icons zu symbolisieren und die Farbe direkt anpassen. Nachteil ist bei der Schrift die Semantik da man die Icons mit Buchstaben sich merken muss. Eigentlich ist handelt es sich die Gleiche Technik wie bei Webdings nur für Web.

Man lädt die Font auf der Web Symbols Seite runter und bindet sie im Style ein.

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('/fonts/websymbols-regular-webfont.eot');
	src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}
 
.symbol { font-family: 'WebSymbolsRegular'; font-size:16px; }

Und im Html kann man jetzt ganz einfach die Icons mit Buchstaben nachbilden:

<div><span class="symbol">I</span>Bild</div>
<div><span class="symbol">S</span>Zahnrad</div>
<div><span class="symbol">C</span>Wolke</div>

Die Web Symbols Font wird immer weiter Entwickelt und bekommt bald neue Icons wie Telefon und E-Mail. Die Benutzung ist frei und unterliegt der OFL Lizenz. Somit hat man eine simple Möglichkeit mit wenigem Einsatz Standard Icons in die Seite zu integrieren.

Und ich möchte noch auf ein Projekt hinweisen wenn es um Öffentliche Icons/ Symbole geht. Das The Noun Project beinhaltet eine Große Sammlung an Vector Grafiken die alltägliche Sachen symbolisieren. Man kann die Icons frei nutzen und man finden eigentlich zu jedem Thema passendes Symbol.