آیکون‌ها

جوملا از آیکون‌های رایگان FontAwesome استفاده می‌کند که به صورت عناصر شبه CSS (CSS pseudo-elements) پیاده‌سازی شده‌اند.

لیست آیکون‌های موجود را می‌توانید در مسیر زیر پیدا کنید: 

`media/templates/administrator/atum/css/vendor/fontawesome-free.css`

زیرمجموعه‌ای از آیکون‌های FontAwesome که به صورت داخلی در جوملا استفاده می‌شوند با نام «icon-something» مشخص شده‌اند. برای مثال، آیکون فایل با نام `icon-file` برای نمایش یک آیکون فایل استفاده می‌شود.

برای نمایش چنین آیکونی می‌توانید از کد زیر استفاده کنید:

<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?>

ویژگی `aria-hidden="true"` باعث مخفی شدن آیکون از خواننده‌های صفحه (screen readers) می‌شود و به بهبود دسترسی‌پذیری کمک می‌کند.

همچنین می‌توانید آیکون‌های FontAwesome را که در جوملا استفاده نمی‌شوند نمایش دهید، اما باید کلاس CSS اضافی را نیز اضافه کنید. بر اساس نام سبک‌های fa، کلاس‌های CSS باید یکی از این دو باشد: 

`fa-solid` یا `fa-brands`

برای مثال:

<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' 
?>