Update icons.md

[pl71]

User description

If you do not agree with "Joomla is keeping the old prefix for backward compatibility", you may remove it or change it.

---

PR Type

Documentation

---

Description

• Updated FontAwesome documentation links to current versions

• Clarified icon prefix usage and backward compatibility explanation

• Expanded guidance on displaying custom FontAwesome icons with multiple approaches

• Improved code examples and formatting for better readability

---

Diagram Walkthrough

flowchart LR
  A["Old icon-prefix docs"] -- "Update links & clarify" --> B["Enhanced icon documentation"]
  B -- "Add backward compatibility note" --> C["Explain icon-prefix usage"]
  B -- "Expand custom icons section" --> D["Multiple FontAwesome integration methods"]
  B -- "Improve code examples" --> E["Better formatted examples"]

Loading

File Walkthrough

Relevant files

Documentation

icons.md Comprehensive update to icons documentation and examples  versioned_docs/version-6.0/general-concepts/icons.md Updated FontAwesome documentation links to current versions (pseudo-elements and how-to guides) Clarified that Joomla uses "icon-" prefix for backward compatibility while FontAwesome now uses "fa-" prefix Expanded section on displaying custom FontAwesome icons with three implementation approaches (Kit, self-hosted webfonts, self-hosted SVG/JS) Improved code examples by removing PHP tags and adding both and element examples with proper formatting +23/-16

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Not Code Change: The PR only updates documentation content and adds no executable code where audit logging would apply, so there is nothing to verify for critical action logging within the added lines. Referred Code Joomla uses 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 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: <span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 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. 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. ... (clipped 10 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: No Error Paths: The changes are purely documentation with HTML snippets and contain no executable logic where error handling or edge case management can be assessed. Referred Code To display such an icon, you can use: <span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 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. 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 `<i>` element: <i class="fa-solid fa-calendar" aria-hidden="true"></i> But the span element can also do the job: <span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> ... (clipped 1 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Doc Only Change: The added lines are documentation and static HTML examples without handling external inputs, so no validation or data handling practices can be evaluated from this diff. Referred Code 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 `<i>` element: <i class="fa-solid fa-calendar" aria-hidden="true"></i> But the span element can also do the job: <span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> <span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'Facebook' ?> Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Use translation keys for text Replace the hardcoded string 'Facebook' with a translatable language key using Text::_() to support internationalization, consistent with Joomla development best practices. versioned_docs/version-6.0/general-concepts/icons.md [37] -<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'Facebook' ?> +<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo Text::_('JFACEBOOK') ?> Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a hardcoded string in a code example and proposes using Joomla's Text::_() method for internationalization, which is a best practice and consistent with other examples in the file.	Low
Update

[HLeithner]

Thanks for you contribution, could you please move the change to ‎docs/general-concepts/icons.md‎ and add html to the code blocks for syntax highlighting.