Joomla Standard Font Awesome Fonts: Difference between revisions
From Joomla! Documentation
Created page with "<noinclude><languages /></noinclude> {{Joomla version|version=4.0.0|time=and later}} <translate><!--T:1--> Since Joomla 4.0.0, the Joomla! CMS comes with its own custom [https..." |
No edit summary |
||
| Line 3: | Line 3: | ||
<translate><!--T:1--> | <translate><!--T:1--> | ||
Since Joomla 4.0.0, the Joomla! CMS comes with its own custom [https://https://fontawesome.com/ Font Awesome Font Set]. These icon fonts are available by default for use in the "Cassiopeia" (Frontend) and "Atum" (Administrator) Templates.</translate> | Since Joomla 4.0.0, the Joomla! CMS comes with its own custom [https://https://fontawesome.com/ Font Awesome Font Set]. These icon fonts are available by default for use in the "Cassiopeia" (Frontend) and "Atum" (Administrator) Templates.</translate> | ||
<translate><!--T:2--> | |||
== How to Use ==</translate> | |||
<translate><!--T:3--> | |||
Icon fonts that are mapped in <tt>/media/system/scss/_icomoon.scss</tt> can be called with a <tt><span class="icon-''name-of-icon''"></tt> tag and a {space} <tt></span></tt>. eg</translate> | |||
<pre> | |||
<span class="icon-joomla"> </span> | |||
</pre> | |||
<translate><!--T:4--> | |||
Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> | |||
<translate><!--T:5--> | |||
Icon fonts that are not mapped can be called with a <tt><span class="far fa-''name-of-icon''"></tt> tag and a {space} <tt></span></tt>. eg</translate> | |||
<pre> | |||
<i class="far fa-address-book"></i> | |||
</pre> | |||
<translate><!--T:6--> | |||
Will show an address book icon:</translate> <i class="far fa-address-book"></i> | |||
Revision as of 10:45, 29 April 2022
Joomla!
≥ 4.0.0
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: