Scuolissima.com - Logo

Come aggiungere icone personalizzare su Blogger

Se siete alla ricerca di un modo per poter aggiungere centinaia o addirittura migliaia di icone personalizzate (vettoriali e scalabili) per il vostro blog su Blogger, allora ho trovato una soluzione adeguata e che attualmente viene utilizzata dalla maggior parte dei designer professionisti, si chiama FontAwesome.

Il sito FontAwesome fornisce una vasta gamma di icone vettoriali di alta qualità e immagini nitide, potete dire addio alle immagini con pixel sfocati.
Funziona anche con i CSS in modo che i colori, le dimensioni, le ombre e gli altri componenti possono essere facilmente adattati e applicati ad essi.
Nonostante l'ottima qualità dell'immagine sono estremamente leggere e caricano molto rapidamente rispetto alle immagini css sprite.
Il team che sta dietro questo strumento è di grande talento e lavora continuamente per offrire un servizio sempre migliore ed in modo gratuito.

La prima cosa che dovete fare è andare su Modello > Modifica HTML e subito dopo il tag <head> dovete inserire questo codice:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

A questo punto potete aggiungere in qualsiasi parte del vostro blog (post, pagine, widget) l'icona che volete; dovete cliccare sull'icona e prelevare il codice di ognuno di essi:


Per esempio se volete usare l'icona della campana (in inglese "Bell") il codice da inserire in HTML sarà:
<i class="fa fa-bell"></i>
Inoltre è possibile modificare il colore, la dimensione, l'ombra usando il css. Per esempio rispettando il nome della classe, in questo caso fa-bell potete eseguire tutte queste personalizzazioni. Il codice che potete usare sarà simile al seguente:
.fa-bell { font-size:20px;
font-weight:bold; color:#111;
border:1px solid #111;
padding:10px; float:left; }
lo dovete inserire prima del tag ]]></b:skin> ,

Se avete ancora dei dubbi su come bisogna utilizzare le icone personalizzate potete dare un'occhiata alla pagina degli esempi di Font Awesome.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies