May 09, 2014

Mini Social Media Icons With Image Sprites

Posted by Yuga irgi on Friday, May 09, 2014 in , | 2 comments
social icon
Today, I've got a  beautiful collection of small social media icons. These icons are made using pure CSS and do a charming bottom-to-up animation when hovered on. Also, just as labnol-style social icons, these icons are created using image sprites instead of individual images. Hence, they won't slow your page down :)


Live Demo:



 

 

Talk is cheap, show me the code!

Here's the code, paste it wherever you want these awesome icons to appear:
<style>
ul.spicesocialwidget li {float: left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTJQnK_UzhrzqcCHc_DR9fcPXnJ691DL_SYDzEVdt7rsJpj6menO3TS29DCO8wwZEtx4zrr7jnlx8ByhkVRQV73nNEV7nn296e4mOM7YFJnsVMvq0j8rU9ahGZafi7ouyqbus7jGs0mc/s924/mini-social-icons.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTJQnK_UzhrzqcCHc_DR9fcPXnJ691DL_SYDzEVdt7rsJpj6menO3TS29DCO8wwZEtx4zrr7jnlx8ByhkVRQV73nNEV7nn296e4mOM7YFJnsVMvq0j8rU9ahGZafi7ouyqbus7jGs0mc/s924/mini-social-icons.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>
<ul class="spicesocialwidget">
<li class="rss">
<a rel="nofollow" href="http://feeds.feedburner.com/#" target="_blank" title="RSS Feeds"></a></li>
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/#" target="_blank" title="Facebook"></a></li>
<li class="googleplus">
<a rel="nofollow" href="https://www.plus.google.com/#" target="_blank" title="Google Plus"></a></li>
<li class="twitter">
<a rel="nofollow" href="http://www.twitter.com/#" target="_blank" title="Twitter"></a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/#" target="_blank" title="YouTube"></a></li>
</ul>
Code Credits: SUYB
Replace the text highlighted in blue with your respective social links. Also, if you don't want a particular icon to appear, simply remove it's entire <li> tag.
Example: Suppose you don't have a YouTube channel and hence, don't want the youtube-icon to appear, simply remove the entire <li> tag with the class "youtube" (you can do the same for others):
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/#" target="_blank" title="YouTube"></a></li>
These icons (being small) are better suited in the footer or header of the blog. However, for new bloggers who don't know where to paste the code, I do recommend creating a new HTML/JavaScript gadget and pasting the above code in there.






 <ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pJ64tgab-LtkQh5RmP7OsmT4sMA1rGIJB2QyrWqoz8DRxjiXG8aHyAJfvVUXu0AbJH-yAA9Ovoz1LPhhaR7cz_8eCtcz7c_7yexny-DMs1gvtDLu_3OZvFBQ8fPY35Oo-TbE2Vk4WMpk/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pJ64tgab-LtkQh5RmP7OsmT4sMA1rGIJB2QyrWqoz8DRxjiXG8aHyAJfvVUXu0AbJH-yAA9Ovoz1LPhhaR7cz_8eCtcz7c_7yexny-DMs1gvtDLu_3OZvFBQ8fPY35Oo-TbE2Vk4WMpk/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.flickr a{ background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

2 comments: