Difference between revisions of "Joomla Standard Icomoon Fonts"
From Joomla! Documentation
(Marked this version for translation) |
(Some markup changes.) |
||
| Line 8: | Line 8: | ||
<translate><!--T:3--> | <translate><!--T:3--> | ||
| − | Icon fonts can be called with a <tt><span class="icon-''name-of-icon''"></tt> tag and a {space} | + | Icon fonts can be called with a <tt><span class="icon-''name-of-icon''"></tt> tag and a {space}:</translate> |
<pre> | <pre> | ||
| Line 15: | Line 15: | ||
<translate><!--T:4--> | <translate><!--T:4--> | ||
| − | Will show the Joomla! icon:</translate> | + | Will show the Joomla! icon:</translate> <span class="icon-joomla"> </span> |
<translate> | <translate> | ||
== Font Size == <!--T:5--></translate> | == Font Size == <!--T:5--></translate> | ||
| − | |||
<translate><!--T:6--> | <translate><!--T:6--> | ||
| − | 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 | + | 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 style sheet file.</translate> |
<pre> | <pre> | ||
| Line 255: | Line 254: | ||
__NOTOC__ | __NOTOC__ | ||
<translate><!--T:11--> | <translate><!--T:11--> | ||
| − | To include the Icomoon fonts in your template you will have to add the | + | To include the Icomoon fonts in your template you will have to add the CSS style sheet (<tt>/media/jui/css/icomoon.css</tt>) or include it in your <tt>.less</tt> file when you generate the <tt>.css</tt> style sheet(s).</translate> |
| − | < | + | <syntaxhighlight 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'); | ||
| − | </ | + | </syntaxhighlight> |
<noinclude> | <noinclude> | ||
Latest revision as of 22:36, 15 December 2022
Joomla!
≥ 3.0.0
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}:
<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 style sheet 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.
joomla
address
apply / edit / pencil
archive / drawer-2
arrow-down-2
arrow-down-3
arrow-down-4
arrow-first
arrow-last
arrow-left-2
arrow-left-3
arrow-left-4
arrow-right-2
arrow-right-3
arrow-right-4
arrow-up-2
arrow-up-3
arrow-up-4
attachment / paperclip / flag-2
backward-2 / reply
backward-circle
ban-circle / minus-circle
bars
basket
book
bookmark
bookmark-2
box-add
box-remove
briefcase
broadcast / connection / wifi
brush
calendar
calendar-2
calendar-3
camera
camera-2 / video
cancel-circle
cart
chart
checkbox-partial
checkbox-unchecked
checkedout / lock / locked
checkin / checkbox / checkbox-checked
checkmark-2
checkmark-circle
chevron-down / downarrow / arrow-down
chevron-left / leftarrow / arrow-left
chevron-right / rightarrow / arrow-right
chevron-up / uparrow / arrow-up
circle
clock
cogs
comment / comments
comments-2
compass
contract
contract-2
credit
credit-2
cube
dashboard
database
delete / remove / cancel-2
download
enter
envelope / mail
envelope-opened / mail-2
equalizer
exit
expand
expand-2
expired
eye-close / eye-blocked / eye-2
eye-open / eye
featured / default / star
feed
file
file-2
file-add / file-plus
file-check
file-minus
file-remove
filter
first
flag
flag-3
folder-3
folder-close / folder-2
folder-minus
folder-open / folder
folder-plus
folder-plus-2
folder-remove
forward-2
forward-circle
grid / grid-view
grid-2 / grid-view-2
health
heart
heart-2
home
home-2
info
info-2 / info-circle
key
lamp
last
lightning / flash
link
list / list-view
list-2
location
loop
menu
menu-2
menu-3
minus / not-ok
minus-sign / minus-2
mobile
move
music
new / plus
next / forward
notification
notification-2 / notification-circle
options / cog
out-2 / new-tab
out-3 / new-tab-2
palette / color-palette
paragraph-center
paragraph-justify
paragraph-left
paragraph-right
pause
pause-circle
pencil-2
pending / warning
phone
phone-2
picture / image
pictures / images
pie
pin / pushpin
play
play-2 / video-2 / youtube
play-circle
plus-circle
power-cord
previous / backward
print / printer
publish / save / ok / checkmark
purge / trash
puzzle
question / question-sign / help
question-2 / question-circle
quote / quotes-left
quote-2 / quotes-right
quote-3 / bubble-quote
radio-checked / generic
radio-unchecked
save-copy / copy
save-new / plus-2
scissors
screen
screwdriver / tools
search
share / redo
share-alt / out
shield
shuffle
signup
smiley / smiley-happy
smiley-2 / smiley-happy-2
smiley-neutral
smiley-neutral-2
smiley-sad
smiley-sad-2
square
stack
star-2
stop
stop-circle
support
switch
tablet
tag
tag-2
tags
tags-2
thumbs-down
thumbs-up
tree
tree-2
unarchive / drawer
unblock / refresh / redo-2
undo
undo-2
unfeatured / asterisk / star-empty
unlock
unpublish / cancel
upload
user
users
vcard
wand
warning-2 / warning-circle
wrench
zoom-in
zoom-out
Including in Your Template[edit]
This section is incomplete.
To include the Icomoon fonts in your template you will have to add the CSS style sheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css style sheet(s).
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');