Add an icon to the label
A label icon can be added to a field label for visual support.
Note: The label icon is a form accessibility feature and provides visual support for easier and better understanding of field contents.
Read more about this in the sections Visforms and Accessibility and Creating Accessible Forms.
If a label icon is set, the label icon is always displayed. The label icon is also displayed if the Hide Label option is enabled for the field. If no label icon is desired, the Label Icon Class parameter must not contain a CSS label class.
Joomla has an option for menu items where you can enter a CSS class for an icon from the icon font Font Awesome. We have adopted this mechanism of specifying an icon by specifying the corresponding CSS class name for the label icon of the field label (see below).
Form with icons in the field label
Fields with field label
The form displays all field labels, each with an additional supporting label icon from the icon font Font Awesome.
The field label visibility is enabled for display:
- Field Configuration » Tab: Basic Settings
Group: Label and Placeholder Settings » Parameter: Label Visibility = “Show label”.
Fields without field label
The form fields do not display a field label, but instead display the label icon from the icon font Font Awesome.
The visibility of the field label is disabled for display purposes:
- Field Configuration » Tab: Basic Settings
Group: Label and Placeholder Settings » Parameter: Label Visibility = “Hide Label”.
Note: If the visibility of the field label is disabled, the label text automatically appears as a placeholder directly in the empty form field.
Note: Displaying the form with a label icon but without label text is detrimental to sufficient accessibility.
Configuration
You enter the CSS class for the icon in the field configuration in the Label Icon Class option. The Label Icon Class option is available for all field types with a real input.
- Field Configuration » Tab: Basic Settings
Group: Label and Placeholder Settings » Parameter: Label Icon Class = ‘fa fa-user’.
Icon Fonts
By default, Joomla uses the icon font Font Awesome. This icon font is fully supported by many Joomla templates.
If an icon from the icon font Font Awesome is to be displayed, the corresponding CSS classes are similar to the following Font Awesome examples:
- fa fa-user
- fa fa-building
- fa fa-barcode
- fa fa-city
- fa fa-flag
- fa fa-phone
- fa fa-envelope
- fa fa-message
Which CSS classes can be used on a Joomla website depends on the available icon fonts. The specific CSS implementation of the icon font is required so that a field label in the form is actually displayed with the desired label icon. Either Joomla or the front-end template must implement the CSS of the icon font.
Unfortunately, a complete list of all Font Awesome icon classes for Joomla is not available.
Icon font “Font Awesome”
Sources for free and paid icon fonts from Font Awesome can be found here: