Supporto volontario e collaborativo per Joomla!® in italiano

Come utilizzare le IcoMoon di Joomla

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 
IcoMoon
Come sappiamo Joomla 3 supporta le icone di Icomoon. Vediamo come utilizzarle nei contenuti, moduli e voci di menu di Joomla!.
Le IcoMoon sono degli Icon Fonts, ossia font che contengono icone vettoriali al posto dei caratteri. Questi si adattano bene a siti responsivi e possono essere ridimensionati a seconda del layout del sito, senza appesantirne il caricamento.

Joomla con il template predefinito Protostar consente di utilizzare il set di font di IcoMoon, di seguito la lista delle icone disponibili:

   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



Come utilizzare le IcoMoon


Questo è il codice da utilizzare per inserire una IcoMoon nel testo di un articolo:
<span class="icon-joomla"> </span>

questo è il risultato:
Tuttavia se proviamo a inserire il codice all'interno dell'articolo utilizzando l'editor predefinito di Joomla TinyMCE, il codice verrà eliminato al salvataggio dell'articolo.
Per questione di sicurezza e pulizia del codice infatti il testo degli articoli viene automaticamente pulito al salvataggio. In questo caso però il codice non è pericoloso, possiamo quindi impostare TinyMCE in modo che non lo tagli.
Andiamo in Estensioni > Plugin > Editor - TinyMCE e nel parametro Elementi validi inseriamo il valore span[*].
Dopo aver salvato possiamo verificare che ora l'editor non taglierà più il codice utilizzato per inserire le IcoMoon.

Dato che le icone sono dei font, è possibile controllarne la dimensione con l'aggiunta di una classe, che dovrà essere inserita nel css o nel foglio di stile .less.

<span class="icon-joomla large-icon"> </span>

o di uno stile direttamente nel codice:
<span class="icon-joomla" style="font-size:36px;"> </span>

questo è il risultato:

In questo modo le possiamo colorare come del normale testo e allinearle a destra o a sinistra:
<span class="icon-joomla" style="font-size:36px; color: #DC143C; margin: 30px 60px 30px 0px; float: left;"> </span>


questo è il risultato:
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

Visualizzare le IcoMoon nei titoli dei moduli

Per inserire queste iconcine all'inizio del titolo di un modulo, andiamo nel tab Avanzate del modulo e nel parametro Classe Header inseriamo l'icona desiderata, ad es. icon-user

parametro Classe Header

Salviamo e vediamo che l'icona appare a sinistra del titolo.
IcoMoon nel titolo di un modulo


Visualizzare le IcoMoon nelle voci di menu

Componente RokCandyJoomla non consente di inserire codice html nel titolo delle voci di menu, quindi per visualizzare le icone è necessario installare l'estensione gratuita RokCandy. Questa estensione permette di inserire output HTML tramite semplici macro. Installiamo quindi il componente e creiamo la nostra macro.

Andiamo in Componenti > RokCandy, clicchiamo su Nuovo e nel campo Macro inseriamo:

 [icomoon]{icon}[/icomoon]


nel campo Html inseriamo

<span class="{icon}"> </span>


e salviamo.

Andiamo poi a inserire la macro nella voce di menu Home modificando il titolo in questo modo

[icomoon]icon-home[/icomoon]Home

Questo è il risultato inserendo le IcoMoon in tutte le voci di menu:

Menu con icone

oppure questo se si tratta di un menu laterale:

Icone menu laterale

Attenzione: inserendo le macro nei titoli delle voci di menu, il codice Html generato andrà a finire anche nel titolo del browser

Titolo del browser

Per risolvere, entrare nella voce di menu, tab Visualizzazione pagina, e inserire nel parametro Titolo pagina Browser il titolo desiderato.


Come aggiungere nuove IcoMoon

Come abbiamo visto Joomla offre un set di IcoMoon predefinito, ma nel sito di IcoMoon è possibile trovarne delle altre, o addirittura generarne di nuove.
Per trovare nuove icone clicchiamo sul pulsante in altro a destra IcoMoon App. Verranno mostrate le icone gratuite disponibili, selezioniamo quelle desiderate e clicchiamo su Generate Font in basso a destra. Qui troveremo le icone selezionate e cliccando sul pulsante Download in basso a destra potremo scaricare un file .zip nel nostro computer.

Decomprimiamo il file .zip e copiamo la cartella fonts nella cartella templates/protostar e il file style.css nella cartella templates/protostar/css/
Rinominiamo il file style.css in user.css, poichè il template è già predisposto per caricare questo file css nel caso sia presente nella cartella.
Apriamo il file user.css e impostiamo correttamente i percorsi della cartella fonts sostituendo fonts con ../fonts, ad esempio:

url('../fonts/icomoon.eot?xxxxx');

Eliminiamo inoltre il seguente codice, visto che è già presente nel file template.css e in modo diverso per adattarsi a Joomla

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
 
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



Ora andiamo a provare a inserire una di queste nuove icone nel nostro sito Joomla e vedremo che appariranno.

In questa pagina è spiegato come modificare le icone e come importarne di nuove: https://icomoon.io/docs.html

Includere le IcoMoon nel proprio template


Nel nostro esempio abbiamo utilizzato Joomla 3 con template Protostar. Per includere i font Icomoon nel proprio template è necessario aggiungere nel file index.php la chiamata al foglio di stile /media/jui/css/icomoon.css o includerlo nel proprio file .less
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');


E ora.... buon divertimento


Fonti:
https://docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts
http://kyleledbetter.com/jui/icons/
https://manualesjoomla.es/blog/35-iconos-de-icomoon-en-nuestros-articulos



commentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.3 Stabile Italiana
Data di rilascio: 04 Luglio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: