CSS-Sprite-Generator
Fügen Sie mehrere Icons zu einem einzigen PNG-Sprite-Sheet zusammen und erhalten Sie den fertigen background-position-CSS-Code, um jedes Icon einzeln auf Ihrer Website anzuzeigen.
So funktioniert es
Ein CSS-Sprite fasst mehrere Icons in einer einzigen Bilddatei zusammen, um die Anzahl der Netzwerkanfragen einer Website zu verringern. Jedes hochgeladene Icon wird in einer Zelle fester Größe auf einem Raster platziert, und das Tool erzeugt automatisch pro Icon eine CSS-Klasse mit der Eigenschaft background-position, die auf die exakte Position im Raster verweist.
Wie verwende ich den erzeugten CSS-Code?
Laden Sie die PNG-Datei herunter, legen Sie sie unter dem Namen sprite.png neben Ihr Stylesheet (oder passen Sie die URL im CSS an), kopieren Sie den erzeugten CSS-Code in Ihre Datei und weisen Sie dann die passende Klasse (zum Beispiel class="icon icon-mon-icone") einem HTML-Element wie einem span zu.
Woher stammen die Namen der CSS-Klassen?
Der Name jeder Klasse wird automatisch aus dem Dateinamen des Icons abgeleitet (in Kleinbuchstaben, Leerzeichen und Sonderzeichen werden durch Bindestriche ersetzt). Bei Duplikaten wird eine Nummer angehängt, damit die Namen eindeutig bleiben.
Die Erzeugung des Sprites und des CSS erfolgt vollständig in Ihrem Browser: Ihre Icons werden niemals an einen Server gesendet.