Joomla Standard Font Awesome Fonts: Difference between revisions
From Joomla! Documentation
No edit summary |
No edit summary |
||
| Line 26: | Line 26: | ||
<translate><!--T:6--> | <translate><!--T:6--> | ||
Will show an address book icon:</translate> <i class="far fa-address-book"></i> | Will show an address book icon:</translate> <i class="far fa-address-book"></i> | ||
<translate> | |||
== Font Size == <!--T:7--></translate> | |||
<translate><!--T:8--> | |||
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.</translate> | |||
<pre> | |||
<span class="icon-joomla large-icon"> </span> | |||
<span class="icon-joomla" style="font-size:24px;"> </span> | |||
</pre> | |||
<translate><!--T:9--> | |||
Here is the resized Joomla! icon:</translate> <span class="icon-joomla" style="font-size:24px;"> </span> | |||
<translate>== Available Fontawesome Icons == <!--T:10--></translate> | |||
<translate><!--T:11--> | |||
This is the complete list of the Font Awesome libraries included in Joomla 4</translate> | |||
Revision as of 10:45, 29 April 2022
Since Joomla 4.0.0, the Joomla! CMS comes with its own custom Font Awesome Font Set. These icon fonts are available by default for use in the "Cassiopeia" (Frontend) and "Atum" (Administrator) Templates.
How to Use
Icon fonts that are mapped in /media/system/scss/_icomoon.scss can be called with a <span class="icon-name-of-icon"> tag and a {space} </span>. eg
<span class="icon-joomla"> </span>
Will show the Joomla! icon:
Icon fonts that are not mapped can be called with a <span class="far fa-name-of-icon"> tag and a {space} </span>. eg
<i class="far fa-address-book"></i>
Will show an address book icon:
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>
Here is the resized Joomla! icon:
Available Fontawesome Icons
This is the complete list of the Font Awesome libraries included in Joomla 4