CSS3, Icons

Free Elegant CSS3 Animated Social Media Icons

Free Elegant Animated CSS3 Icons

css3 icons

This freebie includes 4 types of css3 social media icons, that are easy to intergrate to any of your projects since it is using fontawesome you will have lots of exta icons to use.

View Demo


How to use the css3 icons set

It is very simple to use this animated css3 icons set, all you to do is simply add the predefined classes

  • The div will have horizontal-icon or vertical icon class regarding your how you want it, and will have additional class for how it should behave
  • class for demo 1 is horizontal-icons horizontal-slide
  • class for demo 2 is vertical-icons horizontal-slide
  • class for demo 3 is horizontal-icons vertical-slide-up
  • class for demo 4 is horizontal-icons vertical-slide-up-flip
  • use .horizontal-icon for horizontal icons please follow the same structure to get the exact result div > ul > li > a > i
  • li will have a class of button and a additional class regarding which icon you are using inside of it, for example if are using facebook icon add the class button and facebook to the a tag.
  • If you want to change the content of the box which animates you change it in the data-title attribute.
  • You can customize the animation speed or design of the icons from style.css
  • See http://fontawesome.io/icons/ To know more class names for icons
<div class="horizontal-icons horizontal-slide">
<li><a class="button facebook" href="#" data-title="Facebook">
<i class="icon-facebook"></i> </a></li>
<li><a class="button googleplus" href="#" data-title="Google Plus">
<i class="icon-google-plus"></i> </a></li>
<li><a class="button twitter" href="#" data-title="Twitter">
<i class="icon-twitter"></i> </a></li>
<li><a class="button youtube" href="#" data-title="Youtube">
<i class="icon-youtube"></i> </a></li>
<li><a class="button linkedin" href="#" data-title="Linkedin">
<i class="icon-linkedin"></i> </a></li>
<li><a class="button pinterest" href="#" data-title="Pinterest">
<i class="icon-pinterest-sign"></i> </a></li>
<li><a class="button skype" href="#" data-title="Skype">
<i class="icon-skype"></i> </a></li>
<li><a class="button flickr" href="#" data-title="Flickr">
<i class="icon-flickr"></i> </a></li>
<li><a class="button dropbox" href="#" data-title="Dropbox">
<i class="icon-dropbox"></i> </a></li>
<li><a class="button tumblr" href="#" data-title="Tumblr">
<i class="icon-tumblr"></i> </a> </li>
</ul> </div>

More css3 icons are on the way!!

Share It...Share on Facebook0Tweet about this on TwitterShare on Google+9Share on StumbleUpon5Pin on Pinterest0Share on Reddit0Digg thisShare on Tumblr0
Previous Post Next Post

You Might Also Like

No Comments

Leave a Reply