J3.x

Tipografía Estándar Icomoon para Joomla!

From Joomla! Documentation

This page is a translated version of the page J3.x:Joomla Standard Icomoon Fonts and the translation is 100% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎italiano • ‎日本語 • ‎Nederlands • ‎русский
Joomla! 
≥ 3.0.0

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');