Installare e usare Font Awesome

Da **Niko** Dom 3 Mag 2015 - 12:56

Installare e usare Font Awesome

Questo tutorial vi spiegherà come installare e usare #FontAwesome sul tuo forum Forumattivo. Qui sotto potrai trovare un indice sulle istruzioni in questo topic

Che cos'è Font Awesome?
Installare Font Awesome
Informazioni su Font Awesome
Esempi di utilizzo di Font Awesome su Forumattivo

Che cos'è Font Awesome ?

FontAwesome è un carattere-icona web che permette di mostrare icone attraverso l'uso di classnames CSS, o semplicemente incollando l'icona. Le icone fornite sono una fantastica gamma di immagini per ogni uso. Viene utilizzato da un gran numero di siti web, Incluso Forumattivo, quindi perchè non usarle anche tu? :bene:

Installare e usare Font Awesome Faicon10

Installare Font Awesome

A seconda del tuo stato di amministratore, ci sono due modi per installare Font Awesome sul tuo forum. Scegli il metodo che ti sembra più opportuno

[Metodo 1] Installazione con i templates

Se sei il fondatore o hai accesso al profilo del fondatore, puoi modificare i templates per installare Font Awesome. Se così non fosse e sei solo un amministratore o non hai accesso al fondatore, guarda il metodo 2.

:new:

Per installarlo vai verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e apri il template chiamato overall_header :mod:

Prima di iniziare a modificare il template, clicca qui e copia il codice fornito sotto il easiest method by MaxCDN. Questo permetterà l'importazione delle icone da FontAwesome Wink

Trova {T_HEAD_STYLESHEET} nel template overall_header e subito dopo aggiungi il codice fornito da MaxCDN così da ottenere qualcosa di questo tipo:

Codice:: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> {T_HEAD_STYLESHEET}

Una volta finito, salva le modifiche e pubblica il template :new:

[Metodo 2] Installazione con i codici JavaScript

Questo metodo è il più semplice che ti permetterà di installare Font Awesome, semplicemente aggiungendo il foglio di stile FontAwesome all'elemento senza accedere ai templates (come nel metodo 1). Per installarlo vai verso Pannello di amministrazione ► Modli ► Gestione del codice javascriot, assicurati che sia attivato e crea un nuovo codice javascript :new:

Titolo: FontAwesome
Dove: in tutte le pagine
Codice:
Codice:
(function() { var FA = '{FA_CSS}', a = document.createElement('LINK'); a.rel = 'stylesheet'; a.type = 'text/css'; a.href = FA; document.getElementsByTagName('HEAD')[0].appendChild(a); })();

Modifiche:
Devi solamente effettuare una modifica al codice precedente. Clicca qui e in the easiest method provided by MaxCDN, copia l'URL all'interno dell'attributo href e incollalo al posto di {FA_CSS}.

Il risultato sarà qualcosa di simile:

Codice:: var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',

Torna indietro e salva le modifiche :new:

Font Awesome verrà installato ! :bene:

Informazioni su Font Awesome

Adesso che hai installato Font Awesome, vorrai sapere come integrarlo nel design del tuo forum. Per una lista di esempio, dai un'occhiata a questa pagina. Wink

Per una larga lista di icone fornite da Font Awesome, usa il cheatsheet. puoi copiare e incollare queste icone nel contenuto del tuo css, o sul forum usando il carattere FontAwesome. Guarda la sezione seguente per alcuni esempi per Forumattivo

Esempi per usare Font Awesome su Forumattivo

1. CSS Pseudo Element

Diciamo di volere aggiungere l'icona fa-link ai link della barra di navigazione. Questo può essere fatto copiando il link dell'icona dal cheatsheet e incollandola così com'è il valore content. Infine, dobbiamo impostare font-family come FontAwesome così da mostrare il risultato correttamente. Questo sarà il nostro risultato:

Installare e usare Font Awesome Captur21

Installare e usare Font Awesome Captur21

Codice:: a.mainmenu:before, a.mainmenu::before { content:""; font-family:FontAwesome; }

Nota : Puoi aggiungere fino a due elementi utilizzando ::before e ::after. Stamo usando :before e ::before, perchè in CSS3 :before è stato cambiato con ::before ( così come per :after ) per una migliore distinzione tra pseudo elements e pseudo classes. Per una migliore compatibilità potete usarli entrambi Very Happy

Ecco alcuni altri esempi utilizzando le CSS pseudo elements. Questa volta utilizzeremo ::before e ::after per aggiungere due icone. La seconda icona avrà bisogno di una posizione assoluta, quindi assicuratevi che l'elemento che state applicando sia relativo, o comunque non statico

In questo esempio abbiamo inseito l'icona fa-user e l'icona fa-circle-o alla sinistra del link di navigazione per i membri. Ecco il risultato:

Installare e usare Font Awesome Captur23

Installare e usare Font Awesome Captur23

Codice:: a.mainmenu[href="/memberlist"] { position:relative } a.mainmenu[href="/memberlist"]:before, a.mainmenu[href="/memberlist"]::before { content:""; color:#666; font-family:FontAwesome; font-weight:normal; font-size:13px; margin:0 10px; } a.mainmenu[href="/memberlist"]:after, a.mainmenu[href="/memberlist"]::after { content:""; color:#999; font-family:FontAwesome; font-weight:normal; font-size:24px; position:absolute; left:5px; top:-6px; }

Per inserire un'icona vicino ad un link specifico, dovete usare il CSS attribute selector. Nell'esempio abbiamo selezionato a.mainmenu solo con l'href con il valore di /memberlist. ( [href="/memberlist"] )

2. Usare Font Awesome nei messaggi
Le icone Font Awesome possono essere usate nei tuoi messaggi utilizzando il tag [ font ]. Per renderlo più semplice puoi aggiungere font awesome al tuo editor andando verso Pannello di amministrazione ► Moduli ► Gestione del codice javascript e aggiungendo un nuovo codice js :new:

Titolo: SCEditor FontAwesome
Dove: in tutte le pagine
Codice:
Codice:
$(function(){ if (!$.sceditor) return; $.sceditor.defaultOptions.fonts += ',FontAwesome'; });

Questo aggiungerà font-awesome alla lista dei caratteri, così da poter aggiungere le icone fontawesome nei tuoi post. Semplicemente clicca il font e poi sceglia un'icona dal cheatsheet e incollalo all'interno dei tag. Una volta fatto, dovreste avere un risultato come questo:

Codice:: An [font=FontAwesome][color=#ff0000][/color][/font] for you.

3. Usare FontAwesome con l'HTML

Se non hai ancora aperto il cheatsheet, puoi farlo adesso. Il cheatsheet ti fornisce l'icona, la classname e la unicode entity. In HTML puoi usare la classname e l'elemento <i>. Ecco qualche esempio..
Exclamation

Attenzione: se stai usando una pagina HTML senza l'indice e il footer del forum, dovrai reinstallare FontAwesome aggiungendo l'elemento MaxCDN all'interno del tag < head >

Un piccolo esempio con le icone dei veicoli
Installare e usare Font Awesome Captur22

Installare e usare Font Awesome Captur22

Questo può essere applicato in un widget o dove il codice HTML è attivato

Codice:: <style type="text/css">a.example-fa { font-size:12px; font-weight:bold; display:block; margin:3px 0; } a.example-fa i { width:30px; text-align:center; }</style> <a class="example-fa" href="#"><i class="fa fa-car"></i>Cars</a> <a class="example-fa" href="#"><i class="fa fa-truck"></i>Trucks</a> <a class="example-fa" href="#"><i class="fa fa-motorcycle"></i>Motorcycles</a>

Ecco un altro esempio HTML, utilizzando una pagina HTML senza l'header. Questo fa uso di fa-spinner e fa-spin per presentare delle icone di caricamento

Puoi visualizzare un'anteprima qui, e applicare il codice andando verso Pannello di amministrazione ► Moduli ► Gestione pagien HTML e creando una nuova pagina :new:

Usa l'indice e il footer del tuo forum : No
Imposta come home page : No
Inserisci il contenuto
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Caricamento...</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <link href="http://illiweb.com/fa/favicon/discussion.ico" rel="shortcut icon" type="image/x-icon"/> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <style type="text/css">body{color:#FFF;font-size:12px;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;background:#39C}#loader{text-align:center;position:fixed;top:0;left:0;right:0;bottom:0;border-top:50px solid #333;border-bottom:50px solid #333}#content{height:100px;margin-top:-50px;position:absolute;top:50%;left:0;right:0}</style> </head> <body> <div id="loader"> <div id="content"> <i class="fa fa-spinner fa-spin fa-5x"></i>[url=http://fortawesome.github.io/Font-Awesome/]website[/url] <p>Caricamento... attendi...</p> </div> </div> </body> </html>

Per altro su Font Awesome, controlla gli esempi e le informazioni dal sito ufficiale. Per altre domande, il nostro team di supporto è a vostra disponibilità :good:

Siate Originali con Font Awesome :W: