Dem Label ein Icon hinzufügen
Einem Feld-Label kann zur visuellen Unterstützung zusätzlich ein Label-Icon hinzugefügt werden.
Hinweis: Das Label-Icon ist ein Feature der Barrierefreiheit von Formularen und liefert eine optische Unterstützung zum leichteren und besseren Verständnis der Feld-Inhalte.
Mehr darüber in den Abschnitten Visforms und Barrierefreiheit und Barrierefreie Formulare erstellen.
Ist ein Label-Icon gesetzt, so wird das Label-Icon immer angezeigt. Das Label-Icon wird auch dann angezeigt, wenn die Option Label verstecken für das Feld aktiviert ist. Ist kein Label-Icon gewünscht, darf der Parameter Label Icon Klasse keine CSS-Label-Klasse enthalten.
Joomla hat für die Menü-Einträge eine Option, in die eine CSS-Klasse für ein Icon aus dem Icon-Font Font Awesome eintragen werden kann. Diesen Mechanismus der Festlegung eines Icons durch Angabe des entsprechenden CSS-Klassen-Namens haben wir für das Label-Icon des Feld-Labels übernommen (siehe unten).
Formular mit Icons im Feld-Label
Felder mit Icon mit Feld-Label
Das Formular zeigt alle Feld-Label mit jeweils einem zusätzlichen unterstützenden Label-Icon aus dem Icon-Font Font Awesome an.
Für die Anzeige ist die Sichtbarkeit des Feld-Labels aktiviert:
- Feld-Konfiguration » Reiter: Grundeinstellungen
Gruppe: Label- und Platzhalter-Einstellungen » Parameter: Label Sichtbarkeit = “Label anzeigen”.
Felder mit Icon ohne Feld-Label
Die Formular-Felder zeigen kein Feld-Label an und stattdessen das Label-Icon aus dem Icon-Font Font Awesome.
Für die Anzeige ist die Sichtbarkeit des Feld-Labels deaktiviert:
- Feld-Konfiguration » Reiter: Grundeinstellungen
Gruppe: Label- und Platzhalter-Einstellungen » Parameter: Label Sichtbarkeit = “Label verstecken”.
Hinweis: Ist die Sichtbarkeit des Feld-Labels deaktiviert, erscheint automatisch der Label-Text als Platzhalter direkt im unausgefüllten Formular-Feld.
Hinweis: Die Formular-Darstellung mit Label-Icon aber ohne Label-Text ist nachteilig für eine ausreichende Barrierefreiheit.
Konfiguration
Sie tragen die CSS-Klasse für das Icon in der Feld-Konfiguration in der Option Label Icon Klasse ein. Die Option Label Icon Klasse steht für alle Feld-Typen mit einer echten Eingabe zur Verfügung.
- Feld-Konfiguration » Reiter: Grundeinstellungen
Gruppe: Label- und Platzhalter-Einstellungen » Parameter: Label Icon Klasse = ‘fa fa-user’.
Icon-Fonts
Standardmäßig verwendet Joomla den Icon-Font Font Awesome. Dieser Icon-Font wird von vielen Joomla-Templates vollumfänglich unterstützt.
Soll ein Icon aus dem Icon-Font Font Awesome angezeigt werden, dann lauten die entsprechenden CSS-Klassen etwa wie die folgenden Font Awesome Beispiele:
- fa fa-user
- fa fa-building
- fa fa-barcode
- fa fa-city
- fa fa-flag
- fa fa-phone
- fa fa-envelope
- fa fa-message
Welche CSS-Klassen auf einer Joomla-Webseite verwendet werden können, hängt von den zur Verfügung stehenden Icon-Fonts ab. Es erfordert das konkret implementierte CSS des Icon-Fonts, damit ein Feld-Label im Formular tatsächlich mit dem gewünschten Label-Icon dargestellt wird. Entweder Joomla oder das Frontend-Template müssen das CSS des Icon-Fonts implementieren.
Eine vollständige Liste aller Font Awesome Icon-Klassen für Joomla steht leider nicht zur Verfügung.
Icon-Font “Font Awesome”
Quellen zu freien und kostenpflichtigen Icon-Fonts von Font Awesome finden sie hier: