Come creare delle ottime social icons con fontAwesome

Avete visto quelle icone sulla sidebar? edit: adesso le ho tolte in favore della social bar sulla destra, ma il principio è lo stesso! Sì, esatto, quelle per facebook, twitter, google+ ecc…

Ecco, quelle si chiamano “social icons” (icone sociali) e solitamente si cercano i “pack” e si inseriscono nel sito (proprio come feci io con quelle che vedete lì).

Ma, pensandoci, perché usare delle immagini se possiamo usare dei font “fantastici” (fontAwesome) – soprattutto considerando che il mio ipb li ha già integrati?

Così ho appena preparato una bozza per vedere cosa riuscivo ad ottenere…

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style>
#social_icons > a {
	margin: 3px;
	width: 35px;
	text-align: center;
	border-radius: 50%;
	display: inline-block;
}
#social_icons > a.facebook {
	background: #3b5998;
}
#social_icons > a.youtube {
	background: #e52d27;
}
#social_icons > a.googlePlus {
	background: #dd4b39;
}
#social_icons > a.twitter {
	background: #00aced;
}
#social_icons > a > i {
	color: #fff;
	font-size: 18px;
	line-height: 35px;
}
</style>
<div id="social_icons">
	<a class="facebook" href="https://www.facebook.com/laltroweb" title="Facebook">
		<i class='fa fa-facebook' aria-hidden='true'></i>
	</a>
	<a class="youtube" href="http://it.youtube.com/" title="Youtube">
		<i class='fa fa-youtube' aria-hidden='true'></i>
	</a>
	<a class="googlePlus" href="https://plus.google.com/+LaltrowebItgp" title="Google+">
		<i class='fa fa-google-plus' aria-hidden='true'></i>
	</a>
	<a class="twitter" href="https://twitter.com/laltroweb" title="Twitter">
		<i class='fa fa-twitter' aria-hidden='true'></i>
	</a>
</div>

Risultato: 

Direi che possano andar bene, non vi pare? 🙂

Spero possa tornare utile…

Ovviamente, qualunque carattere qui presente può essere usato: https://fortawesome.github.io/Font-Awesome/icons/