Auf vielen Webseiten werden Icons verbaut, um den Besuchern eine bessere Orientierung zu bieten. Die meisten benutzen für diese Icons einzelne Grafiken. Fortgeschrittene Frontend-Entwickler haben meist eine Sprite-Datei in der alle Icons gesammelt sind und per CSS-Klassen benutzbar sind. Es gibt aber noch eine weitere Methode um Icons auf seiner Webseite zu nutzen: die Icons-Fonts.
Bei Icons-Fonts nutzt man anstatt einer Grafik eine Schriftart die alle benötigten Icons beinhaltet. Die Vorteile liegen klar auf der Hand. Schriftarten können in Größe und Farbe frei angepasst werden. Gerade beim Responsive-Webdesign von Vorteil, wenn sich die Icons in der Größe auch anpassen können. So braucht man nicht für jede Farbvariante eine extra Grafik oder Abschnitt im Sprite.
Eine gutes Font-Icon Set findest Du z.B. auf Font-Awesome. Es ist zudem voll kompatibel zu Bootstrap. Anhand dieser Schriftart möchte ich ein kleines Beispiel geben, wie man diese verwendet. Zuerst ladet Ihr euch die benötigte ZIP-Datei herunter. In dieser befindet sich die Schriftart selber sowie die CSS-Datei. Diese kopiert Ihr in euer Projekt. Danach bindest Du im Head deines Projektes einfach die notwendige CSS Datei ein.
<head> ... <link rel="stylesheet" href="/css/font-awesome.min.css"> ... </head>
Nun stehen Dir im gesamten Projekt die Icons zur Verfügung. Ein Bearbeiten-Symbol kannst Du dann einfach mit der entsprechenden CSS-Klasse einsetzen.
<i class="icon-edit"></i>
Alle notwendigen Dateien für dieses Beispiel sowie eine Übersicht der verfügbaren Icons findest Du bei Font-Awesome. Natürlich gibt es auch noch weitere Icons-Sets im Netz.