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/
Shortlink: https://www.laltroweb.it/?p=96 (Copia)