Joomla Standard Font Awesome Fonts: Difference between revisions
From Joomla! Documentation
No edit summary |
No edit summary |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 4: | Line 4: | ||
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--> | <translate>== How to Use == <!--T:2--></translate> | ||
<translate><!--T:3--> | <translate><!--T:3--> | ||
| Line 11: | Line 10: | ||
<pre> | <pre> | ||
<span class="icon-joomla"> </span> | <span class="icon-joomla" aria-hidden="true"> </span> | ||
</pre> | </pre> | ||
<translate><!--T:4--> | <translate><!--T:4--> | ||
Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> | Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> | ||
The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. | |||
<translate><!--T:5--> | <translate><!--T:5--> | ||
| Line 21: | Line 22: | ||
<pre> | <pre> | ||
<i class="fa fa- | <i class="fa fa-adjust" aria-hidden="true"></i> | ||
</pre> | </pre> | ||
<translate><!--T:6--> | <translate><!--T:6--> | ||
Will show an | Will show an adjust icon:</translate> <i class="fa fa-adjust"></i> | ||
| Line 35: | Line 36: | ||
<pre> | <pre> | ||
<span class="icon-joomla large-icon"> </span> | <span class="icon-joomla large-icon" aria-hidden="true"> </span> | ||
<span class="icon-joomla" style="font-size:24px;"> </span> | <span class="icon-joomla" aria-hidden="true" style="font-size:24px;"> </span> | ||
</pre> | </pre> | ||
<translate><!--T:9--> | <translate><!--T:9--> | ||
Here is the resized Joomla! icon:</translate> <span class="icon-joomla" style="font-size:24px;"> </span> | Here is the resized Joomla! icon:</translate> <span class="icon-joomla" aria-hidden="true" style="font-size:24px;"> </span> | ||
<translate>== Available Fontawesome Icons == <!--T:10--></translate> | <translate>== Available Fontawesome Icons == <!--T:10--></translate> | ||
| Line 49: | Line 50: | ||
/media/vendor/fontawesome-free/webfonts/fa-brands-400 | /media/vendor/fontawesome-free/webfonts/fa-brands-400 | ||
<div class="row"> | <div class="row"> | ||
<div class="small-12 large-4 columns"><span class="icon-joomla"> </span> joomla</div> | <div class="small-12 large-4 columns"><span class="icon-joomla" aria-hidden="true"> </span> joomla</div> | ||
</div> | </div> | ||
| Line 902: | Line 903: | ||
<div class="small-12 large-4 columns"><span class="fa fa-syringe"> </span> syringe</div> | <div class="small-12 large-4 columns"><span class="fa fa-syringe"> </span> syringe</div> | ||
<div class="small-12 large-4 columns"><span class="fa fa-table"> </span> table</div> | <div class="small-12 large-4 columns"><span class="fa fa-table"> </span> table</div> | ||
<div class="small-12 large-4 columns"><span class="fa fa-table-t**ennis"> </span> table-t**ennis</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tablet"> </span> tablet</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tablet-alt"> </span> tablet-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tablets"> </span> tablets</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tachometer-alt"> </span> tachometer-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tag"> </span> tag</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tags"> </span> tags</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tape"> </span> tape</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tasks"> </span> tasks</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-taxi"> </span> taxi</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-teeth"> </span> teeth</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-teeth-open"> </span> teeth-open</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-temperature-high"> </span> temperature-high</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-temperature-low"> </span> temperature-low</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tenge"> </span> tenge</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-terminal"> </span> terminal</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-text-height"> </span> text-height</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-text-width"> </span> text-width</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-th"> </span> th</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-th-large"> </span> th-large</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-th-list"> </span> th-list</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-theater-masks"> </span> theater-masks</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer"> </span> thermometer</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer-empty"> </span> thermometer-empty</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer-full"> </span> thermometer-full</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer-half"> </span> thermometer-half</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer-quarter"> </span> thermometer-quarter</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thermometer-three-quarters"> </span> thermometer-three-quarters</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thumbs-down"> </span> thumbs-down</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thumbs-up"> </span> thumbs-up</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-thumbtack"> </span> thumbtack</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-ticket-alt"> </span> ticket-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-times"> </span> times</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-times-circle"> </span> times-circle</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tint"> </span> tint</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tint-slash"> </span> tint-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tired"> </span> tired</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toggle-off"> </span> toggle-off</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toggle-on"> </span> toggle-on</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toilet"> </span> toilet</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toilet-paper"> </span> toilet-paper</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toilet-paper-slash"> </span> toilet-paper-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-toolbox"> </span> toolbox</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tools"> </span> tools</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tooth"> </span> tooth</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-torah"> </span> torah</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-torii-gate"> </span> torii-gate</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tractor"> </span> tractor</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trademark"> </span> trademark</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-traffic-light"> </span> traffic-light</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trailer"> </span> trailer</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-train"> </span> train</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tram"> </span> tram</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-transgender"> </span> transgender</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-transgender-alt"> </span> transgender-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trash"> </span> trash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trash-alt"> </span> trash-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trash-restore"> </span> trash-restore</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trash-restore-alt"> </span> trash-restore-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tree"> </span> tree</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-trophy"> </span> trophy</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-truck"> </span> truck</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-truck-loading"> </span> truck-loading</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-truck-monster"> </span> truck-monster</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-truck-moving"> </span> truck-moving</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-truck-pickup"> </span> truck-pickup</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tshirt"> </span> tshirt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tty"> </span> tty</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-tv"> </span> tv</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-umbrella"> </span> umbrella</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-umbrella-beach"> </span> umbrella-beach</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-underline"> </span> underline</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-undo"> </span> undo</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-undo-alt"> </span> undo-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-universal-access"> </span> universal-access</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-university"> </span> university</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-unlink"> </span> unlink</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-unlock"> </span> unlock</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-unlock-alt"> </span> unlock-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-upload"> </span> upload</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user"> </span> user</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-alt"> </span> user-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-alt-slash"> </span> user-alt-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-astronaut"> </span> user-astronaut</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-check"> </span> user-check</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-circle"> </span> user-circle</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-clock"> </span> user-clock</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-cog"> </span> user-cog</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-edit"> </span> user-edit</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-friends"> </span> user-friends</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-graduate"> </span> user-graduate</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-injured"> </span> user-injured</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-lock"> </span> user-lock</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-md"> </span> user-md</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-minus"> </span> user-minus</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-ninja"> </span> user-ninja</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-nurse"> </span> user-nurse</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-plus"> </span> user-plus</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-secret"> </span> user-secret</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-shield"> </span> user-shield</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-slash"> </span> user-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-tag"> </span> user-tag</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-tie"> </span> user-tie</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-user-times"> </span> user-times</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-users"> </span> users</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-users-cog"> </span> users-cog</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-users-slash"> </span> users-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-utensil-spoon"> </span> utensil-spoon</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-utensils"> </span> utensils</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vector-square"> </span> vector-square</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-venus"> </span> venus</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-venus-double"> </span> venus-double</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-venus-mars"> </span> venus-mars</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vest"> </span> vest</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vest-patches"> </span> vest-patches</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vial"> </span> vial</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vials"> </span> vials</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-video"> </span> video</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-video-slash"> </span> video-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vihara"> </span> vihara</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-virus"> </span> virus</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-virus-slash"> </span> virus-slash</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-viruses"> </span> viruses</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-voicemail"> </span> voicemail</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-volleyball-ball"> </span> volleyball-ball</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-volume-down"> </span> volume-down</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-volume-mute"> </span> volume-mute</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-volume-off"> </span> volume-off</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-volume-up"> </span> volume-up</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vote-yea"> </span> vote-yea</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-vr-cardboard"> </span> vr-cardboard</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-walking"> </span> walking</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wallet"> </span> wallet</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-warehouse"> </span> warehouse</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-water"> </span> water</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wave-square"> </span> wave-square</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-weight"> </span> weight</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-weight-hanging"> </span> weight-hanging</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wheelchair"> </span> wheelchair</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wifi"> </span> wifi</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wind"> </span> wind</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-window-close"> </span> window-close</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-window-maximize"> </span> window-maximize</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-window-minimize"> </span> window-minimize</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-window-restore"> </span> window-restore</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wine-bottle"> </span> wine-bottle</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wine-glass"> </span> wine-glass</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wine-glass-alt"> </span> wine-glass-alt</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-won-sign"> </span> won-sign</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-wrench"> </span> wrench</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-x-ray"> </span> x-ray</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-yen-sign"> </span> yen-sign</div> | |||
<div class="small-12 large-4 columns"><span class="fa fa-yin-yang"> </span> yin-yang</div> | |||
</div> | </div> | ||
Latest revision as of 15:13, 11 November 2024
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" aria-hidden="true"> </span>
Will show the Joomla! icon:
The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility.
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="fa fa-adjust" aria-hidden="true"></i>
Will show an adjust 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" aria-hidden="true"> </span> <span class="icon-joomla" aria-hidden="true" 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
/media/vendor/fontawesome-free/webfonts/fa-brands-400
/media/vendor/fontawesome-free/webfonts/fa-regular-400 and /media/vendor/fontawesome-free/webfonts/fa-solid-900