Da Joomla 3.0.0, il CMS Joomla! presenta il proprio Set di Font Icomoon. Questi fonts sono disponibili di default nei template "Protostar" (Frontend), "Isis" (Amministrazione) e "Hathor" (Amministrazione).
Come utilizzarli
I font Icon possono essere richiamati con un <span class="icon-name-of-icon"> tag e uno {space}. es
<span class="icon-joomla"> </span>
Mostrerà l'icona di Joomla!:
Dimensioni del carattere
Visto che le icone sono dei caratteri, puoi controllarne la dimensione con una classe o stile. Ovviamente dovrai definire la classe nel tuo foglio di stile .css o .less.
<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>
Questa è l'icona di Joomla! ridimensionata:
Icone Icomoon disponibili
Questa è la lista completa, inclusi i nomi alternativi per richiamare le icone. Le alternative sono separate da uno '/'.
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
Inclusione nel proprio Template
Questa sezione è incompleta.
Per includere i font Icomoon nel proprio template dovrai aggiungere il folgio di stile css (/media/jui/css/icomoon.css) o includerlo in tuo file .less quando generi il foglio di stile .css.
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');