From e470e819b232c5885360ebd767fbe49c72dc70c0 Mon Sep 17 00:00:00 2001 From: ThomasFinnern Date: Sun, 17 May 2026 17:00:31 +0200 Subject: [PATCH 1/5] Improve ICON description with link to guide.joomla.org icon list --- docs/general-concepts/icons.md | 86 ++++++++++++++++++++++++++-------- 1 file changed, 67 insertions(+), 19 deletions(-) diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md index 989609b6..d73860d5 100644 --- a/docs/general-concepts/icons.md +++ b/docs/general-concepts/icons.md @@ -5,38 +5,86 @@ title: Icons Icons ===== -Joomla uses free [FontAwesome](https://fontawesome.com/search) icons, +## Overview +Joomla uses the free [FontAwesome](https://fontawesome.com/search) icons, which are implemented as [CSS pseudo-elements](https://docs.fontawesome.com/web/add-icons/pseudo-elements) -The list of available icons can be found in media/templates/administrator/atum/css/vendor/fontawesome-free.css +Joomla implemented the free standard icons, brand icons and supports a subset "icon-..." to be compatible with J!3x and following versions -The subset of FontAwesome icons used internally within Joomla is designated with the prefix "icon-" (e.g., "icon-calendar", "icon-file", etc.) -This is a remnant of the old coding style of FontAwesome; its latest versions use the "fa-" prefix, but Joomla is keeping the old prefix for backward compatibility. +The source list of available icons can be found in joomla file ```media/templates/administrator/atum/css/vendor/fontawesome-free.css```. A visible representation of all icons with additional information see our [guide.joomla.org](https://guide.joomla.org/user-manual/templates/standard-icons?highlight=WyJpY29ucyJd) -To display such an icon, you can use: +## Fontawesome icons +Fontawesome icons can be used for HTML in following forms: ```php - + + ``` -The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. +The actual icon name fa-!name! class is accompanied by a prefix class like "fa ..". More below or see [FontAwesome 'classic' styles](https://docs.fontawesome.com/web/dig-deeper/styles) +The \ element can also do the job but the preferred way is to use classes inside the \ element. -In case you want to display other icons not included in the Joomla pack, you have several options, one of which is to use additional FontAwesome icons. -This can be achieved in different ways depending on your needs: -1. Using FontAwesome Kit - this is the easiest approach, but you should have an account on their site. -2. Using self-hosted webfonts and additional CSS files from FontAwesome. -3. Using self-hosted SVG and JS files - for a few icons, this way you will have some speed optimization. +Add attribute ```aria-hidden="true"``` for hiding the icon from screen readers and improves accessibility. Use attribute ```style="font-size: 2rem;"``` or ```style="font-size: 48px;"``` for the size of the icon font. + +### Standard icons + +The Prefix part is ```fa``` which is short for ```fas``` which is short for ```fa-solid``` which can be used instead. + +The icon name part begins with ```fa-``` and the name. Example: +```php + + +``` -According to [How To Add Icons](https://docs.fontawesome.com/web/add-icons/how-to), the CSS classes are prefixed "fa-" as "fa-solid" or "fa-brands". -The preferred way is to use classes inside the `` element: +### Brand icons -```html - +The prefix part is ```fab``` which is short for ```fa-brand``` which can be used instead + +Example: +```php + + ``` -But the span element can also do the job: +## Icomoon replacement form / 'icon' parameter in code function calls + +For this set of icons icon names from J3! (icomoon) were replaced (partly) by fontawesome icons. The icon itself is one of the fontawesome icons but the name may differ. Also this is a smaller subset with less icons. It is kept for compatibility with J!3 icomoon replacements. In joomla code there are functions which accept the icon name as parameter. + +### Direct Html use + +The class gets prefix "icon-" (e.g., "icon-calendar", "icon-file", etc.) + +Form: ``````. The name has to be exchanged for icon name. +Add attribute aria-hidden="true" for hiding the icon from screen readers and improves accessibility. +Example: ```php - - + + ``` + +### Parameter in J! functions + +For example in HtmlView.php of a component the ToolBarHelper:: functions accept a icon name from this icon set. + +Example: +```php +ToolBarHelper::title(Text::_('COM_EXAMPLE_TITLE'), 'envelope'); +``` + +:::tip +Instead of using an 'icon' name of the icon class (see above) a fontawesome icon may be used instead in following form. It is helpful when the required symbol is not available — or looks better. +```php +ToolBarHelper::title(Text::_('COM_EXAMPLE_TITLE'), 'none fa fa-camera-retro'); +``` +With 'none' given internally a 'icon-none' will be written into the HTML class and ' fa fa-camera-retro' will follow. +Attention: This could affect subsequent button icons whose CSS formatting is then redefined. +::: + +## Using other icon sets + +In case you want to display other icons not included in the Joomla pack, you have several options, one of which is to use additional FontAwesome icons. +This can be achieved in different ways depending on your needs: +1. Using FontAwesome Kit - this is the easiest approach, but you should have an account on their site. +2. Using self-hosted webfonts and additional CSS files from FontAwesome. +3. Using self-hosted SVG and JS files - for a few icons, this way you will have some speed optimization. From 655167359edc45f5b85c4037e7ffb1b34fa4b5cf Mon Sep 17 00:00:00 2001 From: ThomasFinnern Date: Sun, 17 May 2026 17:14:25 +0200 Subject: [PATCH 2/5] Improved title --- docs/general-concepts/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md index d73860d5..f2b38b8a 100644 --- a/docs/general-concepts/icons.md +++ b/docs/general-concepts/icons.md @@ -2,7 +2,7 @@ title: Icons --- -Icons +Standard Joomla! Icons ===== ## Overview From b9fdb7b34836f4563ab63a9f75d20064e30eee9c Mon Sep 17 00:00:00 2001 From: ThomasFinnern Date: Sun, 17 May 2026 17:19:56 +0200 Subject: [PATCH 3/5] Fixed_ fa_brand's' --- docs/general-concepts/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md index f2b38b8a..7668e58b 100644 --- a/docs/general-concepts/icons.md +++ b/docs/general-concepts/icons.md @@ -38,7 +38,7 @@ The icon name part begins with ```fa-``` and the name. Example: ### Brand icons -The prefix part is ```fab``` which is short for ```fa-brand``` which can be used instead +The prefix part is ```fab``` which is short for ```fa-brands``` which can be used instead Example: ```php From 1192900aa79b271953c4d0b9484d1e469376867f Mon Sep 17 00:00:00 2001 From: ThomasFinnern Date: Tue, 19 May 2026 13:58:43 +0200 Subject: [PATCH 4/5] Fixed: Mislabelled code fences (```php -> ```html) --- docs/general-concepts/icons.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md index 7668e58b..348e8cb6 100644 --- a/docs/general-concepts/icons.md +++ b/docs/general-concepts/icons.md @@ -11,12 +11,12 @@ which are implemented as [CSS pseudo-elements](https://docs.fontawesome.com/web/ Joomla implemented the free standard icons, brand icons and supports a subset "icon-..." to be compatible with J!3x and following versions -The source list of available icons can be found in joomla file ```media/templates/administrator/atum/css/vendor/fontawesome-free.css```. A visible representation of all icons with additional information see our [guide.joomla.org](https://guide.joomla.org/user-manual/templates/standard-icons?highlight=WyJpY29ucyJd) +The source list of available icons can be found in joomla file `media/templates/administrator/atum/css/vendor/fontawesome-free.css`. A visible representation of all icons with additional information see our [guide.joomla.org](https://guide.joomla.org/user-manual/templates/standard-icons?highlight=WyJpY29ucyJd) ## Fontawesome icons Fontawesome icons can be used for HTML in following forms: -```php +```html ``` @@ -31,7 +31,7 @@ Add attribute ```aria-hidden="true"``` for hiding the icon from screen readers a The Prefix part is ```fa``` which is short for ```fas``` which is short for ```fa-solid``` which can be used instead. The icon name part begins with ```fa-``` and the name. Example: -```php +```html ``` @@ -41,7 +41,7 @@ The icon name part begins with ```fa-``` and the name. Example: The prefix part is ```fab``` which is short for ```fa-brands``` which can be used instead Example: -```php +```html ``` @@ -58,7 +58,7 @@ Form: ``````. The name has to be exchanged for icon nam Add attribute aria-hidden="true" for hiding the icon from screen readers and improves accessibility. Example: -```php +```html ``` @@ -68,13 +68,13 @@ Example: For example in HtmlView.php of a component the ToolBarHelper:: functions accept a icon name from this icon set. Example: -```php +```html ToolBarHelper::title(Text::_('COM_EXAMPLE_TITLE'), 'envelope'); ``` :::tip Instead of using an 'icon' name of the icon class (see above) a fontawesome icon may be used instead in following form. It is helpful when the required symbol is not available — or looks better. -```php +```html ToolBarHelper::title(Text::_('COM_EXAMPLE_TITLE'), 'none fa fa-camera-retro'); ``` With 'none' given internally a 'icon-none' will be written into the HTML class and ' fa fa-camera-retro' will follow. From fbb1e60c923c25d11d068da1f99c3e52bed4cd58 Mon Sep 17 00:00:00 2001 From: ThomasFinnern Date: Tue, 19 May 2026 14:06:38 +0200 Subject: [PATCH 5/5] Removed highlight in link --- docs/general-concepts/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md index 348e8cb6..439eecb5 100644 --- a/docs/general-concepts/icons.md +++ b/docs/general-concepts/icons.md @@ -11,7 +11,7 @@ which are implemented as [CSS pseudo-elements](https://docs.fontawesome.com/web/ Joomla implemented the free standard icons, brand icons and supports a subset "icon-..." to be compatible with J!3x and following versions -The source list of available icons can be found in joomla file `media/templates/administrator/atum/css/vendor/fontawesome-free.css`. A visible representation of all icons with additional information see our [guide.joomla.org](https://guide.joomla.org/user-manual/templates/standard-icons?highlight=WyJpY29ucyJd) +The source list of available icons can be found in joomla file `media/templates/administrator/atum/css/vendor/fontawesome-free.css`. A visible representation of all icons with additional information see our [guide.joomla.org](https://guide.joomla.org/user-manual/templates/standard-icons) ## Fontawesome icons Fontawesome icons can be used for HTML in following forms: