Difference between revisions of "Joomla Standard Icomoon Fonts"
From Joomla! Documentation
m (added the PHP template code for adding this stylesheet) |
|||
Line 4: | Line 4: | ||
Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates.</translate> | Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates.</translate> | ||
− | <translate>== How to Use == <!--T:2--></translate> | + | <translate> |
+ | == How to Use == | ||
+ | <!--T:2--></translate> | ||
<translate><!--T:3--> | <translate><!--T:3--> | ||
Line 16: | Line 18: | ||
Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> | Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> | ||
− | <translate>== Font Size == <!--T:5--></translate> | + | <translate> |
+ | == Font Size == | ||
+ | <!--T:5--></translate> | ||
<translate><!--T:6--> | <translate><!--T:6--> | ||
Line 247: | Line 251: | ||
</div> | </div> | ||
− | + | <translate> | |
+ | == Including in Your Template == | ||
+ | <!--T:10--></translate> | ||
<translate><!--T:11--> | <translate><!--T:11--> | ||
− | To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).</translate> | + | To include the Icomoon fonts in your template you will have to add the css stylesheet (<tt>/media/jui/css/icomoon.css</tt>) or include it in your <tt>.less</tt> file when you generate the <tt>.css</tt> stylesheet(s).</translate> |
− | |||
<source lang="php"> | <source lang="php"> | ||
$doc = JFactory::getDocument(); | $doc = JFactory::getDocument(); | ||
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css'); | $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css'); | ||
</source> | </source> | ||
− | This section is incomplete.</translate>}} | + | |
+ | {{note|<translate>This section is incomplete.</translate>}} | ||
<noinclude> | <noinclude> |
Revision as of 13:50, 22 September 2015
Since Joomla 3.0.0, the Joomla! CMS comes with its own custom Icomoon Font Set. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates.
How to Use[edit]
Icon fonts can be called with a <span class="icon-name-of-icon"> tag and a {space}. eg
<span class="icon-joomla"> </span>
Will show the Joomla! icon:
Font Size[edit]
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 Icomoon Icons[edit]
This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below.
Including in Your Template[edit]
To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');