Le icone dei social network
Come inserire le icone dei social network usando un fontTutti conosciamo l'importanza che i social rivestono ai fini della popolarità di un sito web. Inserire nelle pagine i bottoni di condivisione sui social network significa dare una notevole spinta al posizionamento del sito nei motori di ricerca.
Nella guida Bottoni social e altro, potete trovare i link per la condivisione. Questi link possono essere messi sotto ad una immagine, o ad un testo, ma esiste un modo forse più comodo per implementare le icone dei social e ora ve lo spiego.
Prima di tutto, esistono servizi come Font Awesome, tramite i quali si possono implementare tutte le icone desiderate, ma questi servizi presuppongono sempre un collegamento esterno e può capitare che gli sviluppatori decidano di modificare il metodo di implementazione, obbligando i webmaster a modificare tutte le pagine del sito.
Questa esperienza mi ha confermato che rendersi indipendenti è sempre la cosa migliore e mi sono rivolta a Pixeden. Pixeden permette di scaricare, gratuitamente, un set di 100 icone. Queste icone vengono caricate nel sito esattamente come si fa con il font (vedi: Il font).
Una volta scaricato il pacchetto, copiate e incollate tutte le estensioni del font nella stessa cartella in cui tenete il font (o i font) del vostro sito.
Supposto che la cartella "fonts" si trovi (come dovrebbe) nella stessa cartella che contiene il foglio di stile e che questa cartella si chiami "styles", aprite il foglio di stile con il vostro editor e aggiungete il richiamo al font delle icone, così:
@font-face {
font-family: 'pe-icon-social';
src:url('./fonts/pe-icon-social.eot?-96eskg');
src:url('./fonts/pe-icon-social.eot?#iefix-96eskg') format('embedded-opentype'),
url('./fonts/pe-icon-social.woff?-96eskg') format('woff'),
url('./fonts/pe-icon-social.ttf?-96eskg') format('truetype'),
url('./fonts/pe-icon-social.svg?-96eskg#pe-icon-social') format('svg');
font-weight: normal;
font-style: normal;
}
font-family: 'pe-icon-social';
src:url('./fonts/pe-icon-social.eot?-96eskg');
src:url('./fonts/pe-icon-social.eot?#iefix-96eskg') format('embedded-opentype'),
url('./fonts/pe-icon-social.woff?-96eskg') format('woff'),
url('./fonts/pe-icon-social.ttf?-96eskg') format('truetype'),
url('./fonts/pe-icon-social.svg?-96eskg#pe-icon-social') format('svg');
font-weight: normal;
font-style: normal;
}
Salvate.
Ora, aprite il file html della pagina in cui volete inserire i social e, nel link di condivisione di ciascun social, aggiungete il collegamento alla relativa icona, con questa stringa:
<i class="pe-so-facebook"></i>
In questa pagina: http://themes-pixeden.com/font-demos/social/documentation.html trovate la documentazione di Pixeden con gli esempi e le possibili opzioni per personalizzare la grafica dei bottoni.
Il risultato finale sarà simile a quello che potete vedere nelle icone poste in fondo a questa pagina.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie
Elenco argomenti di questa guida:
Torna alla pagina principale:Creare un sito da zero ->>
Leggi anche: Un sito già pronto per te