Pulsante form con icona fontawesome

Come aggiungere una o più icone di testo fontawesome ad un pulsante creato grazie al tag form

Su ForumFree è già stata integrata da tempo la possibilità di utilizzare le icone di testo Font Awesome che possono essere utilizzate sia nella struttura, Codice HTML, Colori e stili, eccetra, che nel titolo o nel testo di una discussione, per informazioni complete vi rimando alla guida ufficiale che potete trovare allo skin lab

Uso di Font Awesome su ForumFree

ed è anche già disponibile uno script che aggiunge un apposito tool che consente di inserire le icone nei messaggi scegliendole dal set completo (con l'aggiunta di alcuni effetti speciali) con un semplice click, nello stesso modo con cui si inseriscono le icone

https://newsboard.forumfree.it/?t=71182926

quindi in questa piccola guida ci concentreremo su di un caso particolare, non dettagliato nella guida generale dello skin lab, cioè come inserire una icona font awesome in un pulsante creato con un form., per ottenere questo risultato si possono usare due metodi, entrambi verranno illustrati utilizzando come esempio il codice del pulsante Aggiungici ai Siti Preferiti! fornito in Codici per il sito, è il pulsante del NewsBoard, ma ovviamente le stesse modifiche possono essere fatte a qualsiasi form.

La procedura iniziale è comune ad entrambi i metodi, l'inserimento di questo codice

in Amministrazione > Sito web > Statistiche e opzioni > Codice da aggiungere nella sezione head

se state già utilizzando le icone Font Awesome nel vostro forum il codice sarà già presente, e quindi non è necessario aggiungerlo nuovamente.




Il codice base del form è questo

la parte da modificare è questo input di tipo submit

è la parte che costituisce il pulsante che viene visualizzato (il resto è il "meccanismo interno" che contiene le funzioni che si attivano cliccando sul pulsante), la prima modifica è alla classe

class="forminput"

è quella generica prevista dali template di forumfree per questo tipo di pulsanti, aggiungiamo una seconda classe di nostra scelta, per esempio secondaclasse, il risultato sarà

quindi inseriamo la seconda classe (usando quella nostro esempio, .secondaclasse) in colori e stili, oltre che per l'inserimento dell'icona potremo utilizzarla anche per eventuali personalizzazioni di quello specifico pulsante, ma l'unico attributo necessario è un font-family, a cui aggiungeremo i font che la skin del nostro forum utilizza per la classe .forminput (qui al NewsBoard è solo uno, il tahoma, ma vi possono essere più nomi di font e anche una famiglia generica di font, di solito quella serif o quella sans-serif, separati da virgole) e in fondo ai nomi di font ne inseriremo uno nuovo (separandolo dagli altri con una virgola), il font 'Fontawesome' (completo di apici), a cui aggiungeremo la parola chiave !important, risultato

.secondaclasse {font-family: tahoma, 'FontAwesome'!important}

ora torniamo all'input, la seconda modifica è al value



che contiene il testo che viene visualizzato nel pulsante (testo che potete modificare a vostra discrezione) e dove inseriremo l'icona, come esempio utilizzerò l'icona dell'ancora



col metodo 1 per l'inserimento nel pulsante occorre utilizzare un particolare codice Unicode, in questa pagina trovate l'elenco completo dei codici Unicode corrispondenti alle icone Fontawesome

http://fontawesome.io/cheatsheet/

scelta l'icona, si inserisce il codice all'interno del value, l'icona dell'ancora è rappresentata da questo codice



quindi il nostro input diventerà (ho inserito l'icona prima del testo, ma potete inserirla anche dopo, o all'interno della frase, o inserire più icone, anche diverse)

per distanziare l'icona dal testo potete aggiungere l'entità HTML che rappresenta lo spazio vuoto

nell'esempio aggiungo due spazi

e il risultato finale sarà questo

il metodo può essere applicato a qualsiasi form vogliate inserire nel vostro sito, se lo avete già personalizzato tramite la classe presente (o aggiunta da voi, se non ve ne è già una) nell'input di tipo submit vi basterà aggiungere a quella classe il font-family 'FontAwesome'!important (come secondo font, il primo sarà quello del testo visibile nel pulsante) e inserire nel value dello stesso input il codice Unicode corrispondente all'icona che volete utilizzare.




Questo secondo metodo, anche se richiede una modifica strutturale e non semplicemente grafica del codice del form, nella maggior parte dei casi offre dei vantaggi rispetto al primo metodo, che può invece risultare conveniente quando si desideri semplicemente inserire l'icona senza aggiungervi effetti speciali o personalizzazioni complesse, partiamo sempre col solito codice di esempio

la parte da modificare è sempre l'input di tipo submit

che sostituiremo con un tag button sempre di tipo submit

ottenendo questo risultato

a questo punto inseriremo l'icona prescelta, la solita ancora, direttamente nel button, assieme al testo già presente, utilizzando il normale codice delle icone Fontawesome

e il codice risultante sarà questo

e il pulsante con l'icona è già pronto, le personalizzazioni possibili sono numerose, all'icona è possibile aggiungere direttamente effetti speciali sfruttando gli attributi di fontawesome

http://fontawesome.io/examples/

quindi potete modificarne le dimensioni, farle girare a diverse velocità, ruotarle a diverse angolazioni o anche sovrapporre due icone, e con questo metodo potete anche personalizzare l'icona a livello grafico (o distanziarla dal testo) con un colore o regolandone le dimensioni (con maggior precisione rispetto agli attributi Fontawesome) utilizzando uno stile in linea

se volete modificare solo quella specifica icona o utilizzando la classe corrispondente (nel caso dell'icona di esempio, è .fa_anchor) in colori e stil, se volete che le modifiche si applichino a tutte le icone di quel tipo.

Anche con questo metodo è possibile inserire due o più icone nel button

e le icone sono personalizzabili separatamente.

Il pulsante di esempio ha la classe forminput, quindi il suo aspetto si adatterà alla grafica della skin del vostro forum, per personalizzare il pulsante (e non solo le icone) sostituite quella classe con una classe vostra, che poi utilizzerete in colori e stili (sì può utilizzare anche per il button uno stile in linea, ma oltre ad essere un metodo meno corretto, lo stile in linea non consente tutte le personalizzazioni di una classe, e va comunque utilizzato solo per piccole dichiarazioni di stile), il metodo è utilizzabile con qualsiasi tipo di form, se desiderate personalizzare il pulsante anche graficamente, e nel codice non è già presente una classe vi basterà aggiungerne una.