From 72f00656ec9be5c5f3590675f5612c1a3c8df58c Mon Sep 17 00:00:00 2001 From: Plamen Date: Tue, 25 Nov 2025 21:58:15 +0800 Subject: [PATCH 1/2] Update icons.md If you do not agree with "Joomla is keeping the old prefix for backward compatibility", you may remove it or change it. --- .../version-6.0/general-concepts/icons.md | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/versioned_docs/version-6.0/general-concepts/icons.md b/versioned_docs/version-6.0/general-concepts/icons.md index b610d7a3..0e2cc18e 100644 --- a/versioned_docs/version-6.0/general-concepts/icons.md +++ b/versioned_docs/version-6.0/general-concepts/icons.md @@ -6,26 +6,33 @@ Icons ===== Joomla uses free [FontAwesome](https://fontawesome.com/search) icons, -which are implemented as [CSS pseudo-elements](https://docs.fontawesome.com/v5/web/advanced/css-pseudo-elements) +which are implemented as [CSS pseudo-elements](https://docs.fontawesome.com/web/add-icons/pseudo-elements) -The list of icons which are available can be found in media/templates/administrator/atum/css/vendor/fontawesome-free.css +The list of available icons can be found in media/templates/administrator/atum/css/vendor/fontawesome-free.css -The subset of FontAwesome icons which are used internally within Joomla are designated as "icon-something", -for example, "icon-file" is used to display a file icon. +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. -To display such an icon you can use: +To display such an icon, you can use: + + -```php -?> - -``` The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. -You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class. -According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands": +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. + + +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: + + + +But the span element can also do the job: + + + -```php -?> - - -``` From a80fc1d8169611a0b2227331870123649974c3d8 Mon Sep 17 00:00:00 2001 From: Plamen Date: Tue, 25 Nov 2025 23:23:04 +0800 Subject: [PATCH 2/2] Update icons.md - escaped code blocks Added three backticks (\(`\text{```}`\)) on a line before and after the code block. --- versioned_docs/version-6.0/general-concepts/icons.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/versioned_docs/version-6.0/general-concepts/icons.md b/versioned_docs/version-6.0/general-concepts/icons.md index 0e2cc18e..d0170b08 100644 --- a/versioned_docs/version-6.0/general-concepts/icons.md +++ b/versioned_docs/version-6.0/general-concepts/icons.md @@ -15,8 +15,9 @@ This is a remnant of the old coding style of FontAwesome; its latest versions us To display such an icon, you can use: +``` - +``` The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 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. @@ -28,11 +29,11 @@ This can be achieved in different ways depending on your needs: 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: - +``` - +``` But the span element can also do the job: - +``` - +```