Le icone dei social network

Come inserire le icone dei social network usando un font.
Questa pagina è un completamento della guida Come creare un sito da zero

Tutti 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;
}

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.







Aiuta il sito! Condividi questa pagina su..

Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti