Icons für Administrationsfunktionen

[Auge]

Hallo

Die Fonts von FontAwesome werden per CSS eingebunden. Dem Element eine weitere Klasse je nach Zustand hinzuzufügen, ist ein leichtes.

damit muss ich mein Markup aber unschön erweitern. Aus einem simplen Button mit Beschriftung (<input type="submit" value="anlegen" name="add-user">), den ich bisher mit einem Hintergrundbild (Icon als PNG-Bildchen und Selektor [type=submit][name=add-user]) "erweitert" hatte, muss nun über <i>-Element und Schnickschnack aufgebauscht werden.

Ja, diese Fonts (nicht nur FontAwesome) werden typischerweise :before ein eigenes Element (das muss und soll (nicht nur mMn) nicht <i> sein, span als semantikfreies Element ist da besser geeignet) gehängt. An der von dir beschriebenen Stelle wäre dazu zudem der Wechsel von <input type="submit" value="anlegen" name="add-user"> zu <button name="add-user">anlegen</button> notwendig, um Kindelemente zuweisen zu können.

Oder haben die eine JavaScript-Lösung, um vorhandenes Markup nach verwendeten Klassen zu durchsuchen und die Icons dann automagisch hineinzupflanzen?

Es gibt zwar Fonts, die irgendwelche JS-Magie abfeiern, aber bei FontAwesome kommst du ohne aus. Du kannst natürlich auch festlegen, bei Vorkommen von Klasse „xy-ungeloest“ per JS das Element „hassunichgesehn“ mit den für das Icon „Hatschi“ notwendigen Klassen einzufügen. Aber will man das selbst mit einer zusätzlich zu erstellenden Programmlogik machen (wenn es nicht unbedingt erforderlich ist)?

Wer kann, kann natürlich auch (mehrfarbige) SVG-Icons erstellen. Die lassen sich ja mittlerweile in modernern Browsern wie Bitmaps benutzen.

Tschö, Auge