Le icone dei social network solitamente vengono realizzate con i CSS utilizzando immagini di sfondo su ciascun link HTML. Il problema maggiore è allineare tutte le icone sulla stessa riga. Normalmente viene usato il floating, ma da Internet Explorer 8 in poi è disponibile anche un'altra soluzione: usare il valore inline-block
della proprietà display
. Vediamo insieme i dettagli dell'esempio.
Per prima cosa si deve tener presente che inline-block
da luogo a un ruolo di visualizzazione misto: gli elementi si dispongono sulla stessa riga, ma vengono formattati come elementi di blocco.
Partiamo dalla seguente struttura HTML:
<div id="social">
<a href="#" id="twitter">Twitter</a>
<a href="#" id="facebook">Facebook</a>
<a href="#" id="linkedin">Linkedin</a>
<a href="#" id="youtube">YouTube</a>
</div>
Il codice CSS è il seguente:
#social {
height: 64px;
}
#social a {
width: 64px;
height: 64px;
display: inline-block;
text-indent: -1000em;
margin-right: 5px;
background-repeat: no-repeat;
background-position: 0 0;
}
#social #twitter {
background-image: url(twitter.png);
}
#social #facebook {
background-image: url(facebook.png);
}
#social #linkedin {
background-image: url(linkedin.png);
}
#social #youtube {
background-image: url(youtube.png);
}
A ciascun link sono state applicate altezza e larghezza e l'indentazione negativa del testo esattamente come se si trattasse di elementi di blocco. Questa è la particolarità del valore inline-block
: un elemento è sia inline
che block
.
Potete visionare l'esempio finale in questa pagina.