Bootstrap snippet: Social icons

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: icons,social,buttons



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container social-shortcodes"> <div class="row"> <div class="col-sm-6 margin30"> <h2 class="left-heading margin30">Border icons</h2> <div class="social-icons margin30"> <a href="#" class="social-icon si-border si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon si-border si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon si-border si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon si-border si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon si-border si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon si-border si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon si-border si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon si-border si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon si-border si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon si-border si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon si-border si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon si-border si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon si-border si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon si-border si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon si-border si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon si-border si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon si-border si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon si-border si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-border si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon si-border si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-border si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon si-border si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon si-border si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon si-border si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon si-border si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon si-border si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon si-border si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon si-border si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon si-border si-facebook si-border-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon si-border si-twitter si-border-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon si-border si-g-plus si-border-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon si-border si-skype si-border-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon si-border si-linkedin si-border-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon si-border si-g-plus si-border-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon si-border si-rss si-border-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon si-border si-pinterest si-border-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon si-border si-tumblr si-border-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon si-border si-vimeo si-border-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon si-border si-digg si-border-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon si-border si-instagram si-border-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon si-border si-flickr si-border-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon si-border si-paypal si-border-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon si-border si-yahoo si-border-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon si-border si-android si-border-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon si-border si-appstore si-border-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon si-border si-dribbble si-border-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-border si-dropbox si-border-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon si-border si-soundcloud si-border-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-border si-xing si-border-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon si-border si-phone si-border-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon si-border si-behance si-border-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon si-border si-github si-border-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon si-border si-stumbleupon si-border-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon si-border si-email si-border-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon si-border si-wordpress si-border-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon si-border si-border-round si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-lg si-border si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-lg si-border si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-lg si-border si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-lg si-border si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-lg si-border si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-lg si-border si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-lg si-border si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-lg si-border si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-lg si-border si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-lg si-border si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-lg si-border si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-lg si-border si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-lg si-border si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-lg si-border si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-lg si-border si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-lg si-border si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-lg si-border si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-lg si-border si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-border si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-lg si-border si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-border si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-lg si-border si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-lg si-border si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-lg si-border si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-lg si-border si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-lg si-border si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-lg si-border si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-lg si-border si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-lg si-border si-facebook si-border-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-lg si-border si-twitter si-border-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-lg si-border si-g-plus si-border-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-lg si-border si-skype si-border-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-lg si-border si-linkedin si-border-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-lg si-border si-g-plus si-border-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-lg si-border si-rss si-border-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-lg si-border si-pinterest si-border-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-lg si-border si-tumblr si-border-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-lg si-border si-vimeo si-border-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-lg si-border si-digg si-border-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-lg si-border si-instagram si-border-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-lg si-border si-flickr si-border-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-lg si-border si-paypal si-border-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-lg si-border si-yahoo si-border-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-lg si-border si-android si-border-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-lg si-border si-appstore si-border-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-lg si-border si-dribbble si-border-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-border si-dropbox si-border-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-lg si-border si-soundcloud si-border-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-border si-xing si-border-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-lg si-border si-phone si-border-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-lg si-border si-behance si-border-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-lg si-border si-github si-border-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-lg si-border si-stumbleupon si-border-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-lg si-border si-email si-border-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-lg si-border si-wordpress si-border-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-lg si-border si-border-round si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-sm si-border si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-sm si-border si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-sm si-border si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-sm si-border si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-sm si-border si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-sm si-border si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-sm si-border si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-sm si-border si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-sm si-border si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-sm si-border si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-sm si-border si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-sm si-border si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-sm si-border si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-sm si-border si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-sm si-border si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-sm si-border si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-sm si-border si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-sm si-border si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-border si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-sm si-border si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-border si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-sm si-border si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-sm si-border si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-sm si-border si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-sm si-border si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-sm si-border si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-sm si-border si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-sm si-border si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-sm si-border si-facebook si-border-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-sm si-border si-twitter si-border-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-sm si-border si-g-plus si-border-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-sm si-border si-skype si-border-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-sm si-border si-linkedin si-border-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-sm si-border si-g-plus si-border-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-sm si-border si-rss si-border-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-sm si-border si-pinterest si-border-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-sm si-border si-tumblr si-border-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-sm si-border si-vimeo si-border-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-sm si-border si-digg si-border-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-sm si-border si-instagram si-border-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-sm si-border si-flickr si-border-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-sm si-border si-paypal si-border-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-sm si-border si-yahoo si-border-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-sm si-border si-android si-border-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-sm si-border si-appstore si-border-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-sm si-border si-dribbble si-border-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-border si-dropbox si-border-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-sm si-border si-soundcloud si-border-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-border si-xing si-border-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-sm si-border si-phone si-border-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-sm si-border si-behance si-border-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-sm si-border si-github si-border-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-sm si-border si-stumbleupon si-border-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-sm si-border si-email si-border-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-sm si-border si-wordpress si-border-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-sm si-border-round si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> </div> <div class="col-sm-6 margin30"> <h2 class="left-heading margin30">Dark icons</h2> <div class="social-icons margin30"> <a href="#" class="social-icon si-dark si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon si-dark si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon si-dark si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon si-dark si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon si-dark si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon si-dark si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon si-dark si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon si-dark si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon si-dark si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon si-dark si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon si-dark si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon si-dark si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon si-dark si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon si-dark si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon si-dark si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon si-dark si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon si-dark si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon si-dark si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-dark si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon si-dark si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-dark si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon si-dark si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon si-dark si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon si-dark si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon si-dark si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon si-dark si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon si-dark si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon si-dark si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon si-dark si-facebook si-dark-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon si-dark si-twitter si-dark-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon si-dark si-g-plus si-dark-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon si-dark si-skype si-dark-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon si-dark si-linkedin si-dark-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon si-dark si-g-plus si-dark-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon si-dark si-rss si-dark-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon si-dark si-pinterest si-dark-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon si-dark si-tumblr si-dark-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon si-dark si-vimeo si-dark-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon si-dark si-digg si-dark-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon si-dark si-instagram si-dark-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon si-dark si-flickr si-dark-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon si-dark si-paypal si-dark-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon si-dark si-yahoo si-dark-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon si-dark si-android si-dark-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon si-dark si-appstore si-dark-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon si-dark si-dribbble si-dark-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-dark si-dropbox si-dark-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon si-dark si-soundcloud si-dark-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon si-dark si-xing si-dark-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon si-dark si-phone si-dark-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon si-dark si-behance si-dark-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon si-dark si-github si-dark-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon si-dark si-stumbleupon si-dark-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon si-dark si-email si-dark-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon si-dark si-wordpress si-dark-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon si-dark si-dark-round si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-lg si-dark si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-lg si-dark si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-lg si-dark si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-lg si-dark si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-lg si-dark si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-lg si-dark si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-lg si-dark si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-lg si-dark si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-lg si-dark si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-lg si-dark si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-lg si-dark si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-lg si-dark si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-lg si-dark si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-lg si-dark si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-lg si-dark si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-lg si-dark si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-lg si-dark si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-lg si-dark si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-dark si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-lg si-dark si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-dark si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-lg si-dark si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-lg si-dark si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-lg si-dark si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-lg si-dark si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-lg si-dark si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-lg si-dark si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-lg si-dark si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-lg si-dark si-facebook si-dark-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-lg si-dark si-twitter si-dark-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-lg si-dark si-g-plus si-dark-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-lg si-dark si-skype si-dark-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-lg si-dark si-linkedin si-dark-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-lg si-dark si-g-plus si-dark-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-lg si-dark si-rss si-dark-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-lg si-dark si-pinterest si-dark-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-lg si-dark si-tumblr si-dark-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-lg si-dark si-vimeo si-dark-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-lg si-dark si-digg si-dark-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-lg si-dark si-instagram si-dark-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-lg si-dark si-flickr si-dark-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-lg si-dark si-paypal si-dark-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-lg si-dark si-yahoo si-dark-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-lg si-dark si-android si-dark-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-lg si-dark si-appstore si-dark-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-lg si-dark si-dribbble si-dark-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-dark si-dropbox si-dark-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-lg si-dark si-soundcloud si-dark-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-lg si-dark si-xing si-dark-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-lg si-dark si-phone si-dark-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-lg si-dark si-behance si-dark-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-lg si-dark si-github si-dark-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-lg si-dark si-stumbleupon si-dark-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-lg si-dark si-email si-dark-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-lg si-dark si-wordpress si-dark-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-lg si-dark si-dark-round si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-sm si-dark si-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-sm si-dark si-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-sm si-dark si-g-plus"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-sm si-dark si-skype"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-sm si-dark si-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-sm si-dark si-g-plus"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-sm si-dark si-rss"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-sm si-dark si-pinterest"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-sm si-dark si-tumblr"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-sm si-dark si-vimeo"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-sm si-dark si-digg"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-sm si-dark si-instagram"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-sm si-dark si-flickr"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-sm si-dark si-paypal"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-sm si-dark si-yahoo"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-sm si-dark si-android"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-sm si-dark si-appstore"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-sm si-dark si-dribbble"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-dark si-dropbox"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-sm si-dark si-soundcloud"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-dark si-xing"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-sm si-dark si-phone"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-sm si-dark si-behance"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-sm si-dark si-github"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-sm si-dark si-stumbleupon"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-sm si-dark si-email"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-sm si-dark si-wordpress"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> <div class="clearfix"></div> <div class="divide10"></div> <pre>&lt;a href="#" class="social-icon-sm si-dark si-facebook"&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook"&gt;&lt;/i&gt; &lt;/a&gt;</pre> <div class="divide30"></div> </div><!--icons--> <div class="social-icons margin30"> <a href="#" class="social-icon-sm si-dark si-facebook si-dark-round"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon-sm si-dark si-twitter si-dark-round"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon-sm si-dark si-g-plus si-dark-round"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a href="#" class="social-icon-sm si-dark si-skype si-dark-round"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a href="#" class="social-icon-sm si-dark si-linkedin si-dark-round"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a href="#" class="social-icon-sm si-dark si-g-plus si-dark-round"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a href="#" class="social-icon-sm si-dark si-rss si-dark-round"> <i class="fa fa-rss"></i> <i class="fa fa-rss"></i> </a> <a href="#" class="social-icon-sm si-dark si-pinterest si-dark-round"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-icon-sm si-dark si-tumblr si-dark-round"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a href="#" class="social-icon-sm si-dark si-vimeo si-dark-round"> <i class="fa fa-vimeo-square"></i> <i class="fa fa-vimeo-square"></i> </a> <a href="#" class="social-icon-sm si-dark si-digg si-dark-round"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a href="#" class="social-icon-sm si-dark si-instagram si-dark-round"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a href="#" class="social-icon-sm si-dark si-flickr si-dark-round"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a href="#" class="social-icon-sm si-dark si-paypal si-dark-round"> <i class="fa fa-paypal"></i> <i class="fa fa-paypal"></i> </a> <a href="#" class="social-icon-sm si-dark si-yahoo si-dark-round"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a href="#" class="social-icon-sm si-dark si-android si-dark-round"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a href="#" class="social-icon-sm si-dark si-appstore si-dark-round"> <i class="fa fa-apple"></i> <i class="fa fa-apple"></i> </a> <a href="#" class="social-icon-sm si-dark si-dribbble si-dark-round"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-dark si-dropbox si-dark-round"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a href="#" class="social-icon-sm si-dark si-soundcloud si-dark-round"> <i class="fa fa-soundcloud"></i> <i class="fa fa-dribbble"></i> </a> <a href="#" class="social-icon-sm si-dark si-xing si-dark-round"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a href="#" class="social-icon-sm si-dark si-phone si-dark-round"> <i class="fa fa-phone"></i> <i class="fa fa-phone"></i> </a> <a href="#" class="social-icon-sm si-dark si-behance si-dark-round"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a href="#" class="social-icon-sm si-dark si-github si-dark-round"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a href="#" class="social-icon-sm si-dark si-stumbleupon si-dark-round"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a href="#" class="social-icon-sm si-dark si-email si-dark-round"> <i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i> </a> <a href="#" class="social-icon-sm si-dark si-wordpress si-dark-round"> <i class="fa fa-wordpress"></i> <i class="fa fa-wordpress"></i> </a> </div> </div> </div> </div>
body{margin-top:20px;} a,a:hover { text-decoration: none; } /**************** SOCIAL BUTTONS **********************/ /**social icons default size**/ .social-icon { margin: 0 5px 5px 0; width: 40px; height: 40px; font-size: 20px; line-height: 40px !important; color: #555; text-shadow: none; border-radius: 3px; overflow: hidden; display: block; float: left; text-align: center; border: 1px solid #AAA; } .social-icon:hover { border-color: transparent; } .social-icon i { display: block; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; line-height: 40px; position: relative; } .social-icon i:last-child { color: #FFF !important; } .social-icon:hover i:first-child { margin-top: -40px; } /***social icons lg (big)***/ .social-icon-lg { margin: 0 5px 5px 0; width: 60px; height: 60px; font-size: 30px; line-height: 60px !important; color: #555; text-shadow: none; border-radius: 3px; overflow: hidden; display: block; float: left; text-align: center; border: 1px solid #AAA; } .social-icon-lg:hover { border-color: transparent; } .social-icon-lg i { display: block; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; line-height: 60px; position: relative; } .social-icon-lg i:last-child { color: #FFF !important; } .social-icon-lg:hover i:first-child { margin-top: -60px; } /***social icons small***/ .social-icon-sm { margin: 0 5px 5px 0; width: 30px; height: 30px; font-size: 18px; line-height: 30px !important; color: #555; text-shadow: none; border-radius: 3px; overflow: hidden; display: block; float: left; text-align: center; border: 1px solid #AAA; } .social-icon-sm:hover { border-color: transparent; } .social-icon-sm i { display: block; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; line-height: 30px; position: relative; } .social-icon-sm i:last-child { color: #FFF !important; } .social-icon-sm:hover i:first-child { margin-top: -30px; } si-border { border: 1px solid #AAA !important; } .si-border-round { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .si-dark-round { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .si-gray-round { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .si-gray { background: #f3f3f3; border: 0px; } .si-dark { background-color: #333; border: 0px !important; color: #fff !important; } /**icons hover colored**/ .si-colored-facebook, .si-facebook:hover { background-color: #3B5998 !important; } .si-colored-twitter, .si-twitter:hover { background-color: #00ACEE !important; } .si-colored-google-plus, .si-g-plus:hover { background-color: #DD4B39 !important; } .si-colored-skype, .si-skype:hover { background-color: #00AFF0 !important; } .si-linkedin:hover, .si-colored-linkedin { background-color: #0E76A8 !important; } .si-pin:hover, .si-colored-pinterest { background-color: #C8232C !important; } .si-rss:hover, .si-colored-rss { background-color: #EE802F !important; } .si-pinterest:hover, .si-colored-pinterest { background-color: #C8232C !important; } .si-tumblr:hover, .si-colored-tumblr { background-color: #34526F !important; } .si-vimeo:hover, .si-colored-vimeo { background-color: #86C9EF !important; } .si-digg:hover, .si-colored-digg { background-color: #191919 !important; } .si-instagram:hover, .si-colored-instagram { background-color: #3F729B !important; } .si-flickr:hover, .si-colored-flickr { background-color: #FF0084 !important; } .si-paypal:hover, .si-colored-paypal { background-color: #00588B !important; } .si-yahoo:hover, .si-colored-yahoo { background-color: #720E9E !important; } .si-android:hover, .si-colored-andriod { background-color: #A4C639 !important; } .si-appstore:hover, .si-colored-apple { background-color: #000 !important; } .si-dropbox:hover { background-color: #3D9AE8 !important; } .si-dribbble:hover, .si-colored-dribbble { background-color: #EA4C89 !important; } .si-soundcloud:hover, .si-colored-soundcoloud { background-color: #F70 !important; } .si-xing:hover, .si-colored-xing { background-color: #126567 !important; } .si-phone:hover, .si-colored-phone { background-color: #444 !important; } .si-behance:hover, .si-colored-behance { background-color: #053eff !important; } .si-github:hover, .si-colored-github { background-color: #171515 !important; } .si-stumbleupon:hover, .si-colored-stumbleupon { background-color: #F74425 !important; } .si-email:hover, .si-colored-email { background-color: #6567A5 !important; } .si-wordpress:hover, .si-colored-wordpress { background-color: #1E8CBE !important; } .social-shortcodes .left-heading { font-size: 30px; text-transform: uppercase; } .grid-boxed { border: 1px solid transparent; padding: 20px; } .grid-boxed:hover { border: 1px dashed #999; }
Dey-Dey

Social icons

Dey-Dey
  Jul 16th, 08:59
1.4K Views