Filtra la ricerca ...
Frase esatta
Categorie

Come usare Font Awesome su Joomla!

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

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 su Joomlaattiviamolo 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 :

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.

    joomla inserire codice html puro

  3. Fatto ciò, identifichiamo quale icone vogliamo inserire e scriviamone il codice HTML all’interno dell’editor, esempio :
  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

glyphi icon in 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

trovereste questo :

aggiuntete dopo il ; (punto e virgola) dell’ultima riga, premendo invio :

per ottenere :

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

A

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

Esempio di utilizzo di Font Awesome nel template di K2

esempio font awesome in template k2

Alla prossima, ciao!

 

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.