Eigene Icon Sets für Bootstrap verwenden

Bei der Verwendung von Icons werden im allgemeinen CSS Sprites empfohlen. Dabei handelt werden mehrere kleine Icons in einer Datei zusammengefasst und dann über CSS Formatierungen entsprechend positioniert.

Für Bootstrab konnte ich dies mit folgenden einfachen Schritten auf meinem Blog installieren. Zuerst müssen die Icons zusammengestellt werden (z.B. aus einem existierenden Set wie famfam ) Um die Dateigröße klein zu halten habe ich mir die benötigten Icons rausgesucht und in ein Zip File gepackt.

Auf dieser Webseite kann man aus diesem Zip dann einfach die Sprite Datei und die zugehörigen CSS Anweisungen bekommen. Wichtige Angaben:

horizontal undvertical offset 5 px
class prefix cus-

Dann Hochladen der PNG Datei und die CSS Informationen in eine neue oder existierende CSS Datei auf dem Server einbinden und noch folgende Element dazupacken

/* icons */
[class^="cus-"],
[class*=" cus-"] {
display: inline-block;
width: 17px;
height: 16px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("/cas-hbauer-icon.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
*margin-left: 0;
}
.cus-comments{ background-position: 0 0; width: 16px; height: 16px; }
.cus-date{ background-position: 0 -21px; width: 16px; height: 16px; }
.cus-email{ background-position: 0 -42px; width: 16px; height: 16px; }
.cus-find{ background-position: 0 -63px; width: 16px; height: 16px; }
.cus-house_go{ background-position: 0 -84px; width: 16px; height: 16px; }
.cus-magnifier{ background-position: 0 -105px; width: 16px; height: 16px; }
.cus-tick{ background-position: 0 -126px; width: 16px; height: 16px; }

Danach müssen im Design an den gewünschten Stellen dieser Tag einfügt werden.

<i class="cus-date"></i>