CSS: icone dei social network con inline-block

CSS: icone dei social network con inline-block

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.

Torna su