The standard templates Cassiopeia (site) and Atum (backend) offer a set of free icons from Font Awesome.

From historical reasons we have two types of classes to access the icons. Furthermore the fontawesome 'prefix'-class' is different for normal and brand icons. More below ...

How to Use

• Font Awesome standard icons

  Font Awesome icons can be used for HTML in the form

  <i style="font-size: 48px;" class="fa fa-!name!"></i>

  <span class="fa fa-!name! large-icon"></span>

  Please replace !name! with one see below.

  The actual fa-!name! class is accompanied by a prefix class. The prefix class "fa .." is short for "fas ..." which is short for ```fa-solid``` which can be used instead.

  The <span> element can also do the job but the preferred way is to use classes inside the <i> element.

• Font Awesome brand icons

  Font Awesome brand icons differ from standard icons in the 'pretext' format. 

  <i style="font-size: 48px;" class="fa fa-!name!"></i>

  <span class="fa fa-!name! large-icon"></span>

  Please replace !name! with one, see below.

  The prefix part is "fab" which is short for "fa-brands" which can be used instead

• IcoMoon replacement form

  Icons from J3! (IcoMoon) were replaced (partly) by Font Awesome icons. Icons can be used for HTML in the form

  <i style="font-size: 48px;" class="icon-!name!"></i>

  <span class="icon-!name! large-icon"></span>

  The class gets prefix "icon-" (e.g., "icon-calendar", "icon-file", etc.). Please replace !name! with one see below. For example:

  <span class="icon-joomla large-icon"></span>

  Above will show the Joomla! icon

  The icon itself is one of the Font Awesome icons but the name may differ. Also this is a smaller subset with less icons.

Font Size

Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.

<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>

CSS sources:

In joomla the css file may be found in following paths:

Template Atum:

    media\templates\administrator\atum\css\vendor\fontawesome-free\fontawesome.css

Template Cassiopeia:

    media/system/css/joomla-fontawesome.css

    media/system/scss/joomla-fontawesome.scss 

Available Icons in Joomla!