unix addicted webdeveloper & designer…

Buttons mit Icons

Für manche Projekte benötigt man eine Menge Icons, die durch eine CSS-Klasse z.B. auf einen Button angewendet werden sollen. Also sucht man sich aus einem der bekannten und beliebten Iconsets das Benötigte zusammen und pflegt diese in einer separaten CSS-Datei.

Das wird gerade bei vielen Icons sehr fehleranfällig und zeitaufwendig. Dabei lässt sich dieser Schritt einfach automatisieren. Alles, was Ihr dazu braucht, liefern Pinguin- und Apfel-Betriebssysteme bereits mit.

Erstmal kopiert ihr dazu alle benötigten Icons in einen eigenen Ordner neben eurem bestehenden Style-Sheet. Ich ergänze diesen immer noch um die Angabe der entsprechenden Icongröße wie z.B.

"icons_16"

für 16x16px große Icons. Nun öffnest du einen Terminal, wechselst in das soeben erstellte Verzeichnis und führst dort ein bisschen Shell Magic aus. Die erstellt Dir den benötigten Stylesheet und speichert diesen als icons_16.css.

mv ../icons_16.css ../icons_16.css.bac; \
for file in `ls`; \
do echo "a.icon_16_${file%%.*} { background:url($file) }"  \
>> ../icons_16.css; done;

komplett kopieren und im Terminal einfügen

danach sollte deine Ordnerstruktur ungefähr so aussehen:

/Project
  /index.html       # Das HTML-Projekt
  /icons_16.css     # Die erstellte CSS-Datei
  /icons_16         # Dein Icon-Ordner
    /icon_a.png
    /icon_b.png
  /style.css        # Dein regulärer Style

In der “style.css” definierst Du nun wie gewohnt den Basis-Look Deines Buttons und importierst lediglich noch die “icons_16.css” am Anfang des Dokumentes.

@import url(icons_16.css);

a {
    display:block;
    float:left;
    padding:10px 10px 10px 32px;
    margin:0px 10px 10px 0px;

    background: 10px center no-repeat #333;
    text-decoration:none;
    color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

a:hover {
    background-color: #999;
    color: #333;
}

Nun kannst du jedem Button durch Verwendung einer Klasse, die sich aus “icon_16_” + den Dateinamen der Bilddatei zusammensetzt, automatisch das entsprechende Icon zuordnen.

<a href="#" class="icon_16_emoticon_happy">emoticon_happy.png</a>

in diesem Fall das “happy emoticon”.

Button mit Emoticon Happy Icon

Alle benötigten Daten habe ich hier nochmal zum Download zusammengefasst: icon_site.zip

No related posts.