diff --git a/versioned_docs/version-6.0/general-concepts/icons.md b/versioned_docs/version-6.0/general-concepts/icons.md index b610d7a3..d0170b08 100644 --- a/versioned_docs/version-6.0/general-concepts/icons.md +++ b/versioned_docs/version-6.0/general-concepts/icons.md @@ -6,26 +6,34 @@ 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. + -```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: +``` + +``` +But the span element can also do the job: +``` + + ```