Desde Joomla 3.0.0, el CMS de Joomla! viene con su propia Fonts Icomoon personalizada. Esta tipografía de iconos están disponibles por defecto para el uso en las plantillas "Protostar" (Lado Cliente), "Isis" (Lado Administrador) y "Hathor" (Lado Administrador).
Cómo se Utiliza
La tipografía de iconos puede ser llamada con una etiqueta<span class="icon-nombre-del-icono"> y un {espacio}. por ejemplo:
<span class="icon-joomla"> </span>
Mostrará el icono de Joomla!:
Tamaño del Icono
Como los iconos son tipografías, puedes controlar el tamaño de ellos con una clase o estilo=instrucción agregada. Por supuesto, tendrás que definir la clase en tu archivo de hoja de estilos .css o .less.
<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>
Aquí está el icono de Joomla! redimensionado:
Iconos Icomoon Disponibles
Esta es la lista completa, incluyendo los nombres alternativos para llamar el icono. Las alternativas están separados por '/'.
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
Como Incluirlos en Tu Plantilla
Esta sección está incompleta.
Para incluir la tipografía Icomoon en tu plantilla tendrás que agregar la hoja de estilo css (/media/jui/css/icomoon.css) o incluirla en tu archivo .less al generar la hoja(s) de estilo(s) .css.
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');