"Icons" per JToolBarHelper nel backend

Il metodo statico JToolBarHelper:: title viene usato per aggiungere un titolo lla pagina Joomla! del componente sul lato admin.

Tipicamente la chiamata viene inserita nel file view.html.php:

JToolBarHelper::title ( JText::_ ( 'COM_COMPONENTNAME_XYZ' ), 'lamp' );

Il primo parametro contiene il titolo, spesso "localizzato" usando JText, il secondo parametro invece determina "l' immagine" che appare alla sinistra. Ho messo la parola immagine tra apici perchè vedremo che non si tratta nè di una immagine nè una icona. Seguiamo l'evoluzione di questo codice PHP:

JToolBarHelper::title ( 'HelloWorld manager', 'lamp' );

L' HTML che ne deriva è il seguente:

<h1 class="page-title">
   <span class="icon-lamp"></span>HelloWorld manager
</h1>

Una nota importante, "Hello World manager" è fuori dal tag span.

Joomla! 2.5, il passato

Il codice HTML prodotto da JToolBarHelper con Joomla! 2.5 era molto simile, ma la tecnica che produceva l'effetto grafico era completamente diversa. L' icona era effettivamente una immagine, tipicamente un png 48x48, con un nome simile a 'icon-48- {nome-secondo-parametro}', nel nostro caso particolare icon-48-lamp.png. Le immagini erano tutte sotto "{template-home}/images/header/" nella directory home del template.

Joomla! 3, oggi

La tecnica usata dal template ISIS Joomla! 3, applicabile anche a progetti che nulla hanno a che fare con Joomla!, per me è spettacolare. Il segreto è nel CSS.

Il CSS di ISIS contiene questo:

.icon-lamp::before {
    content: "t";
}
[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "IcoMoon";
    font-style: normal;
}
.page-title [class^="icon-"], .page-title [class*=" icon-"] {
    margin-right: 16px;
}
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-right: 0.25em;
    width: 14px;
}

Psicanalizziamo il codice in grassetto.

::before content ... eh?

::before è un selettore CSS, presente da CSS2, che inserisce del contenuto prima del tag selezionato. La proprietà 'content' stabilisce il contenuto da inserire. Nel nostro caso il tag HTML cui si applica è

<span class = "icon-lamp"> </ span>

Che nel nostro caso è vuoto, e il contenuto che il nostro CSS inserisce nel tag span è una "t" ... si una semplice lettera. uh? E allora?

[class^="icon-"]::before, [class*=" icon-"]::before ... mh

"attribute ^ = value" è un altro selettore, che questa volta arriva con CSS3, e si applica ai tag HTML che hanno un attributo che inizia con un particolare valore. "attribute * = value" è molto simile, ma si applica ai tag che contengono il valore in qualsiasi posizione all'interno di un attributo specifico. Nel nostro caso si applica ai tag HTML che hanno nel attributo "class" la stringa "icon-" all' inizio o "icon-" da qualche parte all' interno; ed è il nostro caso, dove span ha classe pari a "icon-lamp".

Il selettore precedente ha inserito una "t". Questo selettore invece imposta a quela "t" il font-family pari a 'IcoMoon'.

Magia!

Quindi la nostra lampadina non è altro che la lettera "t" nel font "IconMoon", che è un font iconico.

"Font icons" o "Glyph icons"

Questa soluzione è fantastica perchè:

• Flessibile. Il web designer può facilmente cambiare colore alle icone, di foreground o background, e applicare stili come il grassetto o l' obliquo
• Scalabile. Se si desidera una icona più grande, si aumenta il font-size, senza più problemi legati a immagini sgranate o impastate dai resize
• Resolution sempre al top, anche su cellulare
• Download veloce, quello da scaricare è il font, non 'n' immagini

Qui trovate altro materiale online.

Ok ma ... oltre alle lampadine?

Ecco un breve elenco con qualche associazione tra lettere e nomi:

L'elenco completo è qui.