Supporto volontario e collaborativo per Joomla!® in italiano

Come utilizzare le glyph icons su Joomla! con NS - Font Awesome

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
come utilizzare font awesome in un articolo joomla

NS FontAwesome è un plugin gratuito che introduce l’utilizzo del font web “Font Awesome”. Questo tipo di font permette di utilizzare delle icone vettoriali sul proprio sito internet (in gergo glyph icons), senza avere la necessità di crearle ogni volta con qualche software vettoriale.

Font Awesome è un progetto Open Source fondato da Dave Gandy, il font è usufruibile per progetti personali o commerciali, qui il link al progetto http://fontawesome.io/

Con questo font possiamo davvero sbizzarrirci per personalizzare il nostro sito Joomla!, vediamo come fare e vediamo anche qualche idea :-)
  1. Cominciamo scaricando il plugin dalla JED a questo link http://extensions.joomla.org/extensions/style-a-design/typography/26216 .
  2. Il plugin si installa come un qualunque altro plugin, quindi da Estensioni\Gestione Estensioni\Installa da file – pacchetto compresso.
  3. Attiviamo il plugin andando su Estensioni\Gestione plugin e scrivendo nel filtro di ricerca “ns” (senza le virgolette), poi diamo invio.

    Apparirà questa schermata
Come installare NS Font Awesome

attiviamolo e cominciamo a divertirci !

A questo indirizzo http://fontawesome.io/icons/ troviamo la liste di tutte le icone disponibili ed il relativo codice HTML per l’inserimento.

Come inserire glyph icon su un sito Joomla!

Le glyph icons si inseriscono attraverso un tag HTML denominato “i” (ossia icon), all’interno del tag viene specificata la classe che richiama, in questo caso, l’icona di Font Awesome, analizziamo il codice :

<i class="fa fa-joomla"></i>

il codice è composto da una parte variabile ed una costante

Parte costante : <i class="fa fa-joomla"></i>

La costante viene utilizzata per richiamare il font ed ovviamente il tag

Parte variabile : <i class="fa fa-joomla"></i>

La parte variabile invece identifica il tipo di icona da inserire, in questo caso mostra l’icona di Joomla!

Come inserire icone glyph icon all’interno di un articolo Joomla!

Per inserire una o più icone di Font Awesome all’interno di un qualunque articolo o modulo Joomla! è molto semplice.
  1. Aprire un articolo / modulo in cui vogliamo inserire la glyph icon
  2. Importante ! Disabilitare o utilizzare la funzione di inserimento HTML puro del nostro editor . Questo è molto importante perché se inseriamo puro codice HTML nell’ editor WYSISWG Joomla!, verrà interpretato come testo normale, quindi a front end non vedremo la nostra icona glyph.

    Inserire codice HTML puro

  3. Fatto ciò, identifichiamo quale icone vogliamo inserire e scriviamone il codice HTML all’interno dell’editor, esempio :

    <i class="fa fa-joomla"></i>
    <i class="fa fa-html5"></i>
    <i class="fa fa-css3"></i>
    <i class="fa fa-google"></i>
    <i class="fa fa-eur"></i>

  4. Il risultato sarà una cosa simile (ho aggiunto un po’ di CSS per spaziarle ed ingrandirle altrimenti erano piccoline e non rendevano l’idea). Il testo l’ho aggiunto io

Come inserire glyph icon in un articolo Joomla!

Come ridimensionare le icone di Font Awesome

Nel caso voleste ingrandire le icone secondo le vostre esigenze, potete agire in diversi modi, ne cito un paio.

Primo metodo : modificare il file CSS del plugin.

N.B. : cambierà la dimensione di tutte le icone glyph che utilizzerete

Aprire il file : %vostra_installazione_joomla%/plugins/system/ns_fontawesome/fontawesome/css/font-awesome.css

Riga : 14 troverete questo :

.fa { -moz-font-feature-settings: normal; -moz-font-language-override: normal; -moz-osx-font-smoothing: grayscale; display: inline-block; font-family: FontAwesome; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-rendering: auto; }

Aggiungete : font-size: 20px per ottenere

.fa { -moz-font-feature-settings: normal; -moz-font-language-override: normal; -moz-osx-font-smoothing: grayscale; display: inline-block; font-family: FontAwesome; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-rendering: auto; font-size:20px; }

Il valore “20px” varia a seconda della grandezza che volete.

Il secondo metodo invece è quello di scrivere il CSS inline e modificare la dimensione solo delle icone che ci interessano.

Esempio da :

<i class="fa fa-joomla"></i>

A

<i class="fa fa-joomla" style=”font-size:20px”></i>

in questo modo andremo a “colpire” la singola icona.

Alla prossima, ciao!

CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Alessio Angeloro (alessioa)
Alcune informazioni su di me:
Dirigo Websynapse.it, spettacolare manipolo di supereroi votati allo sviluppo di progetti web e di e-commerce altamente professionali, ho un blog per addetti ai lavori e collaboro a volte anche come freelance con web agency e aziende interessate alle mie competenze specialistiche in PHP/MySQL, HTML, CSS, JQuery, Ajax, Joomla, WordPress e Prestashop. Mi piacciono la montagna, il Wing Chun e le tagliatelle al ragù !


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 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: