CodePen

HTML

            
              <div class="page-wrap">
  <h2><a href="http://stackicons.com">Stackicons-Social - <span>stackicons.com</a></span></h2>

  
  <!-- Override button-shape by adding one of these classes,
       either on the parent nav element or on individual
       icons (which will override the parent):

           st-shape-square, st-shape-rounded1 (slightly rounded),
           st-shape-rounded2 (rounded), st-shape-rounded3 (more
           rounded - iOS) st-shape-circle, or st-shape-icon. 
           Or use st-shape-r0 - st-shape-r5 (square to icon).

       Single color icons have a "color-style" default that
       is set using SASS variables in the "Construction Kit."

       See color-styles here by adding one of these classes:

           st-brand-color, st-brand-variant, st-single-color,
           st-single-color-brand (brand-color on hover),
           st-embossed, st-embossed-only

       (single-color and brand-variant values are generated
       via SASS variables in Construction Kit.)

       Finally, you can add the "st-multi-color" class to
       display a "multi-color" version, which uses absolute
       positioning to stack up to four pseudo elements. -->

  <nav class="text-center st-multi-color st-shape-r5" style="font-size:125%;"><!-- try different sizes here -->
    <!-- inline-block: comment-out white space
         or don't close tags, or -4px margin-right,
         or, hey, just use floats -->
    <a title="AddThis" class="st-icon-addthis" href="">Add This</a>
    <a title="App.net" class="st-icon-adn st-shape-circle" href="">App.net</a>
    <a title="Amazon" class="st-icon-amazon" href=""><span></span>Amazon</a>
    <a title="Android" class="st-icon-android st-shape-icon" href=""><span></span>Android</a>
    <a title="Apple" class="st-icon-apple st-shape-icon" href="">Apple</a>
    <a title="Behance" class="st-icon-behance" href="">Behance</a>
    <a title="Blogger" class="st-icon-blogger" href="">Blogger</a>
    <a title="CodePen" class="st-icon-codepen st-shape-circle" href="">Codepen</a>
    <a title="Delicious" class="st-icon-delicious" href=""><span></span>Delicious</a>
    <a title="deviantART" class="st-icon-deviantart" href=""><span></span>Deviant Art</a>
    <a title="Digg" class="st-icon-digg" href="">Digg</a>
    <a title="Dribbble" class="st-icon-dribbble" href=""><span></span>Dribbble</a>
    <a title="Dribbble" class="st-icon-dribbble-alt st-shape-icon" href=""><span></span>Dribbble</a>
    <a title="Dropbox" class="st-icon-dropbox" href="">Dropbox</a>
    <a title="Ebay" class="st-icon-ebay" href=""><span></span>Ebay</a>
    <a title="Email" class="st-icon-email" href=""><span></span>Email</a>
    <a class="st-icon-email2" href="">Email</a>
    <a title="Evernote" class="st-icon-evernote" href="">Evernote</a>
    <a title="Facebook" class="st-icon-facebook" href="">Facebook</a>
    <a title="Facebook" class="st-icon-facebook-alt" href="">Facebook</a>
    <a title="Flattr" class="st-icon-flattr" href=""><span></span>Flattr</a>
    <a title="Flickr" class="st-icon-flickr" href=""><span></span>Flickr</a>
    <a title="Forrst" class="st-icon-forrst" href=""><span></span>Forrst</a>
    <a title="Foursquare" class="st-icon-foursquare" href=""><span></span>Foursquare</a>
    <a title="GitHub" class="st-icon-github" href=""><span></span>Github</a>
    <a title="GitHub" class="st-icon-github-alt" href=""><span></span>Github</a>
    <a title="Gittip" class="st-icon-gittip st-icon-r4" href="">Gittip</a>
    <a title="Gmail" class="st-icon-gmail" href=""><span></span>Gmail</a>
    <a title="Gmail" class="st-icon-gmail-alt" href=""><span></span>Gmail</a>
    <a title="Google" class="st-icon-google" href="">Google</a>
    <a title="Google+" class="st-icon-googleplus" href="">Google+</a>
    <a title="IMDb" class="st-icon-imdb" href=""><span></span>IMDb</a>
    <a title="Instagram" class="st-icon-instagram" href=""><span></span>Instagram</a>
    <a title="Kickstarter" class="st-icon-kickstarter" href="">Kickstarter</a>
    <a title="Last.fm" class="st-icon-lastfm" href="">last.fm</a>
    <a title="LinkedIn" class="st-icon-linkedin" href="">Linked In</a>
    <a title="Microsoft" class="st-icon-microsoft st-shape-icon" href=""><span></span>Microsoft</a>
    <a title="Myspace" class="st-icon-myspace" href="">Myspace</a>
    <a title="Pandora" class="st-icon-pandora" href="">Pandora</a>
    <a title="PayPal" class="st-icon-paypal" href=""><span></span>Paypal</a>
    <a title="PayPal" class="st-icon-paypal2" href=""><span></span>Paypal</a>
    <a title="Picasa" class="st-icon-picasa" href=""><span></span>Picasa</a>
    <a title="Pinboard" class="st-icon-pinboard" href="">Pinboard</a>
    <a title="Pinterest" class="st-icon-pinterest" href=""><span></span>Pinterest</a>
    <a title="Rdio" class="st-icon-rdio" href="">Rdio</a>
    <a title="Reddit" class="st-icon-reddit" href=""><span></span>Reddit</a>
    <a title="RSS" class="st-icon-rss" href="">RSS</a>
    <a title="ShareThis" class="st-icon-sharethis" href="">ShareThis</a>
    <a title="Skype" class="st-icon-skype" href=""><span></span>Skype</a>
    <a title="SlideShare" class="st-icon-slideshare" href=""><span></span>Slideshare</a>
    <a title="SoundCloud" class="st-icon-soundcloud" href="">Soundcloud</a>
    <a title="Spotify" class="st-icon-spotify" href=""><span></span>Spotify</a>
    <a title="StumbleUpon" class="st-icon-stumbleupon st-shape-circle" href="">Stumbleupon</a>
    <a title="Stack Overflow" class="st-icon-stackoverflow" href=""><span></span>Stack Overflow</a>
    <a title="Tumblr" class="st-icon-tumblr" href="">Tumblr</a>
    <a title="Twitter" class="st-icon-twitter" href="">Twitter</a>
    <a title="Vimeo" class="st-icon-vimeo" href="">Vimeo</a>
    <a title="Vine" class="st-icon-vine" href="">Vine</a>
    <a title="Windows" class="st-icon-windows st-shape-icon" href="">Windows</a>
    <a title="Windows 7" class="st-icon-windows7 st-shape-icon" href=""><span></span>Windows 7</a>
    <a title="Wordpress" class="st-icon-wordpress" href="">Wordpress</a>
    <a title="Xing" class="st-icon-xing" href=""><span></span>Xing</a>
    <a title="Yahoo" class="st-icon-yahoo" href=""><span></span>Yahoo</a>
    <a title="Yelp" class="st-icon-yelp" href=""><span></span>Yelp</a>
    <a title="YouTube" class="st-icon-youtube" href=""><span></span>YouTube</a>
    <a title="YouTube" class="st-icon-youtube2" href=""><span></span>YouTube</a>
    <a title="YouTube" class="st-icon-youtube-alt" href=""><span></span>YouTube</a>
    <a title="Zerply" class="st-icon-zerply" href="">Zerply</a>
    <a title="Search" class="st-icon-search" href="">Search</a>
    <a class="st-icon-search-alt" href=""><span></span>Search</a>
    <a title="Menu" class="st-icon-menu st-shape-icon" href="">Menu</a>
    <a title="Menu" class="st-icon-menu-alt st-shape-icon" href="">Menu</a>
    <a title="Menu" class="st-icon-menu-alt2 st-shape-icon" href="">Menu</a>
    <a title="More..." class="st-icon-more st-shape-icon" href="">More&#8230;</a>
    <a title="Submenu" class="st-icon-triangle-down st-shape-icon" href="">More</a>
    <hr />
  </nav>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* CSS loaded from http://stackicons.com/css/stackicons-social-codepen.css */
/* CSS is for demo only. A bit heavyweight (1.3 MB) with all the icons and overriding shapes and color-styles. Typically, you would use the SASS "construction kit" to create your defaults, and generate CSS only for the icons you'll be using... 
(e.g., stackicons-social-minimal.css is 383K) */

/* Presentational CSS */
.page-wrap {
  width: 80%; 
  min-width: 240px; 
  max-width: 600px; 
  margin: 1em auto; 
  font-family:sans-serif; }

h2 {
  text-align:center; 
  font-weight:200; 
  color: #bbb; }

h2 a { 
  text-decoration:none;
  color: #bbb; }

h2 span { white-space: nowrap; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................