CodePen Embed - Social Media Button Library

<!-- Page Description -->
<div id="intro">
  <h1>Social Media Button Library</h1>
  <p>Easy to use class based social media button styles. Easily mix and match most styles by using multiple classes on your html elements. Choose your style, size, and networks with ease.</p>
  <p>Below you will find a list of all the default style options, their css class, and samples of what they look like.</p>
</div>

<!-- Default Button Set -->
<div class="social-set">
  <h3>Default</h3>
  <code>wpfl-social-links</code>
  <ul class="wpfl-social-links">
    <li><a href="#" class="wpfl facebook">Facebook</a></li>
    <li><a href="#" class="wpfl twitter">Twitter</a></li>
    <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
    <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
    <li><a href="#" class="wpfl reddit">Reddit</a></li>
    <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
    <li><a href="#" class="wpfl youtube">YouTube</a></li>
    <li><a href="#" class="wpfl instagram">Instagram</a></li>
    <li><a href="#" class="wpfl vine">Vine</a></li>
    <li><a href="#" class="wpfl flickr">Flickr</a></li>
    <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
    <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
    <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
    <li><a href="#" class="wpfl behance">Behance</a></li>
    <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
    <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
    <li><a href="#" class="wpfl pocket">Pocket</a></li>
    <li><a href="#" class="wpfl github">GitHub</a></li>
    <li><a href="#" class="wpfl lastfm">LastFM</a></li>
    <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
    <li><a href="#" class="wpfl skype">Skype</a></li>
    <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
    <li><a href="#" class="wpfl twitch">Twitch</a></li>
    <li><a href="#" class="wpfl trello">Trello</a></li>
    <li><a href="#" class="wpfl wordpress">WordPress</a></li>
    <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
  </ul>
</div>

<!-- Default Button Options -->
<section id="options" class="icon-sets">
  <h2>Style Options</h2>
  <div class="social-set">
    <h3>Rounded Corners</h3>
    <code>wpfl-social-links rounded</code>
    <ul class="wpfl-social-links rounded">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <h3>Border</h3>
    <code>wpfl-social-links border</code>
    <ul class="wpfl-social-links border">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <h3>Bottom Border</h3>
    <code>wpfl-social-links border-bottom</code>
    <ul class="wpfl-social-links border-bottom">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <h3>Shadow</h3>
    <code>wpfl-social-links shadow</code>
    <ul class="wpfl-social-links shadow">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <h3>Pills</h3>
    <code>wpfl-social-links pill</code>
    <ul class="wpfl-social-links pill">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <h3>Hollow</h3>
    <code>wpfl-social-links hollow</code>
    <ul class="wpfl-social-links hollow">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons sleek">
      <h3>Icons Sleek</h3>
      <code>wpfl-social-links icons sleek</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons">
      <h3>Icons</h3>
      <code>wpfl-social-links icons</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons-only">
      <h3>Icons Only</h3>
      <code>wpfl-social-links icons-only</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons-only-round">
      <h3>Icons Only Round</h3>
      <code>wpfl-social-links icons-only-round</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links no-spacing">
      <h3>No Spacing</h3>
      <code>wpfl-social-links no-spacing</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links small">
      <h3>Default Small</h3>
      <code>wpfl-social-links small</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links large">
      <h3>Default Large</h3>
      <code>wpfl-social-links large</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links gradient">
      <h3>Gradient</h3>
      <code>wpfl-social-links gradient</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links material">
      <h3>Material</h3>
      <code>wpfl-social-links material</code>
      <li><a href="#" class="wpfl facebook ripple-effect">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>
</section>

<!-- Button Option Combinations -->
<section id="combinations" class="icon-sets">
  <h2>Sample Combinations</h2>

  <div class="social-set">
    <ul class="wpfl-social-links icons-only small">
      <h3>Icons Only Small</h3>
      <code>wpfl-social-links icons-only small</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>


  <div class="social-set">
    <ul class="wpfl-social-links icons-only large">
      <h3>Icons Only Large</h3>
      <code>wpfl-social-links icons-only large</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>


  <div class="social-set">
    <ul class="wpfl-social-links icons-only-round small">
      <h3>Icons Only Round Small</h3>
      <code>wpfl-social-links icons-only-round small</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>


  <div class="social-set">
    <ul class="wpfl-social-links icons-only-round large">
      <h3>Icons Only Round Large</h3>
      <code>wpfl-social-links icons-only-round large</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons border-bottom rounded">
      <h3>Icons Bottom Border Rounded</h3>
      <code>wpfl-social-links icons border-bottom rounded</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons hollow pill material">
      <h3>Icons Hollow Pill Material</h3>
      <code>wpfl-social-links icons hollow rounded</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons small no-spacing">
      <h3>Icons Small No Spacing</h3>
      <code>wpfl-social-links icons small no-spacing</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons pill border-bottom gradient">
      <h3>Icons Pill Bottom Border Gradient</h3>
      <code>wpfl-social-links icons pill border-bottom gradient</code>
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>

  <div class="social-set">
    <ul class="wpfl-social-links icons-only-round border">
      <h3>Icons Only Round Border</h3>
      <code>wpfl-social-links icons-only-round border</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>

  
  
  <div class="social-set">
    <ul class="wpfl-social-links icons-only-round hollow">
      <h3>Icons Only Round Hollow</h3>
      <code>wpfl-social-links icons-only-round hollow</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>
  
  <div class="social-set">
    <ul class="wpfl-social-links icons-only sleek-white no-spacing">
      <h3>Icons Only Sleek White No Spacing</h3>
      <code>wpfl-social-links icons-only sleek-white no-spacing</code>
      <li><a href="#" class="wpfl facebook"></a></li>
      <li><a href="#" class="wpfl twitter"></a></li>
      <li><a href="#" class="wpfl pinterest"></a></li>
      <li><a href="#" class="wpfl linkedin"></a></li>
      <li><a href="#" class="wpfl reddit"></a></li>
      <li><a href="#" class="wpfl googleplus"></a></li>
      <li><a href="#" class="wpfl youtube"></a></li>
      <li><a href="#" class="wpfl instagram"></a></li>
      <li><a href="#" class="wpfl vine"></a></li>
      <li><a href="#" class="wpfl flickr"></a></li>
      <li><a href="#" class="wpfl tumblr"></a></li>
      <li><a href="#" class="wpfl vimeo"></a></li>
      <li><a href="#" class="wpfl stumbleupon"></a></li>
      <li><a href="#" class="wpfl behance"></a></li>
      <li><a href="#" class="wpfl bitbucket"></a></li>
      <li><a href="#" class="wpfl foursquare"></a></li>
      <li><a href="#" class="wpfl pocket"></a></li>
      <li><a href="#" class="wpfl github"></a></li>
      <li><a href="#" class="wpfl lastfm"></a></li>
      <li><a href="#" class="wpfl slideshare"></a></li>
      <li><a href="#" class="wpfl skype"></a></li>
      <li><a href="#" class="wpfl soundcloud"></a></li>
      <li><a href="#" class="wpfl twitch"></a></li>
      <li><a href="#" class="wpfl trello"></a></li>
      <li><a href="#" class="wpfl wordpress"></a></li>
      <li><a href="#" class="wpfl wikipedia"></a></li>
    </ul>
  </div>
  
  <!--<div class="social-set">
    <h3>Floating Sidebar</h3>
    <code>wpfl-social-links floating-sidebar</code>
    <ul class="wpfl-social-links floating-sidebar">
      <li><a href="#" class="wpfl facebook">Facebook</a></li>
      <li><a href="#" class="wpfl twitter">Twitter</a></li>
      <li><a href="#" class="wpfl pinterest">Pinterest</a></li>
      <li><a href="#" class="wpfl linkedin">LinkedIn</a></li>
      <li><a href="#" class="wpfl reddit">Reddit</a></li>
      <li><a href="#" class="wpfl googleplus">Google Plus</a></li>
      <li><a href="#" class="wpfl youtube">YouTube</a></li>
      <li><a href="#" class="wpfl instagram">Instagram</a></li>
      <li><a href="#" class="wpfl vine">Vine</a></li>
      <li><a href="#" class="wpfl flickr">Flickr</a></li>
      <li><a href="#" class="wpfl tumblr">Tumblr</a></li>
      <li><a href="#" class="wpfl vimeo">Vimeo</a></li>
      <li><a href="#" class="wpfl stumbleupon">StumbleUpon</a></li>
      <li><a href="#" class="wpfl behance">Behance</a></li>
      <li><a href="#" class="wpfl bitbucket">BitBucket</a></li>
      <li><a href="#" class="wpfl foursquare">FourSquare</a></li>
      <li><a href="#" class="wpfl pocket">Pocket</a></li>
      <li><a href="#" class="wpfl github">GitHub</a></li>
      <li><a href="#" class="wpfl lastfm">LastFM</a></li>
      <li><a href="#" class="wpfl slideshare">SlideShare</a></li>
      <li><a href="#" class="wpfl skype">Skype</a></li>
      <li><a href="#" class="wpfl soundcloud">SoundCloud</a></li>
      <li><a href="#" class="wpfl twitch">Twitch</a></li>
      <li><a href="#" class="wpfl trello">Trello</a></li>
      <li><a href="#" class="wpfl wordpress">WordPress</a></li>
      <li><a href="#" class="wpfl wikipedia">Wikipedia</a></li>
    </ul>
  </div>-->
</section>

/*************************************
  >> Display Styles <<
  **
  ** Not Needed!
*************************************/
* {
  margin: 0;
  padding:0;
}
$gradient-difference: 7.5%;
$background-color: #f5f5f5;
$from: $background-color;
$to: darken($background-color,5%);
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
  background-color: #f5f5f5;
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}
h1, h2, h3 { font-family: 'Oswald'; }
h3 { color: #272727; }
#intro {
  background: #272727;
  color: #efefef;
  padding: 1em;
  p { 
    margin: .25em 0 .5em 0;
    max-width: 600px;
    font-size: 13px;
    color: #dbdbdb;
  }
}
.icon-sets {
  border-top: solid 2px #444;
  padding-top: 3em;
  & > h2 {
    margin-left: .5em;
    font-size: 2em;
  }
}
.social-set {
  display: block;
  margin: 2em 1em;
}
code {
  background-color: #efefef;
  border: solid 1px #dbdbdb;
  display: block;
  padding: .25em .5em;
  font-size: 14px;
  margin: 1em 0;
  max-width: 350px;
}



/*************************************
  >> Imports <<
*************************************/
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
@import url(https://fonts.googleapis.com/css?family=Oswald:400);


/*********************************************
  >> Social Media Colors <<
  **
  ** These colors were carefully chosen to 
  ** best match the social media chanels, 
  ** however, you may change the colors to 
  ** any colors that you would like. Only 
  ** need to update the color once here,
  ** these variables will ensure that  
  ** relative colors for the gradients, hover,  
  ** and borders will be set in the code below.
*********************************************/
$facebook: #3b5998;
$twitter: #00aced;
$googleplus: #dd4b39;
$youtube: #bb0000;
$linkedin: #007bb6;
$instagram: #517fa4;
$pinterest: #cb2027;
$vine: #00bf8f;
$flickr: #ff0084;
$tumblr: #32506d;
$vimeo: #aad450;
$reddit: #5F99CF;
$stumbleupon: #EB4924;
$behance: #1769ff;
$bitbucket: #205081;
$foursquare: #EF4B78;
$pocket: #EE4056;
$github: #333;
$lastfm: #BB0000;
$slideshare: #007bb6;
$skype: #00AFF0;
$soundcloud: #FF5500;
$twitch: #6441A5;
$trello: #0079BF;
$wordpress: #23282d;
$wikipedia: #000;


/*********************************************
  >> Button Settings <<
  **
  ** Easily configure your preferred button 
  ** options here. 
*********************************************/
/* Padding */
$vertical-padding: .5em;
$horizontal-padding: 1.5em;
/* Margin */
$vertical-margin: .25em;
$horizontal-margin: .25em;
/* Text */
$text-color: #efefef;
$default-font-size: 16px;
$small-font-size: 12px;
$large-font-size: 21px;
/* Border */
$border-size: 2px;
/* Transition */
$transition: all .333s ease-in-out;

/*****************************************
  >> Background Color & Hover Effects <<
  **
  ** Control the background color and 
  ** hover effect for the buttons with
  ** this simple mixin.
*****************************************/
@mixin setBgColorAndHover($baseColor) {
  background-color: $baseColor;
  &:hover { 
    background-color: lighten($baseColor, 10%); //lighten,darken; 
    //Add Other Hover Effects Here....
    /* border-radius: 3px; */
  } 
}

/****************************************
  >> Gradients <<
  **
  ** Control the gradient effect for the
  ** buttons. Modifying code here will
  ** only update the color difference. 
****************************************/
@mixin gradient($color) {
  $gradient-difference: 7.5%;
  $from: $color;
  $to: darken($color,$gradient-difference);
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
  &:hover {
    $from: $color;
    $to: lighten($color,5%);
    background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background: -moz-linear-gradient(top,  $from, $to);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
  }
}

/*********************************************
  >> Social Link Buttons <<
  **
  ** These social buttons presume you are 
  ** using a list based html setup. If you
  ** prefer not to use lists, you will need 
  ** to modify the code below. 
*********************************************/
.wpfl-social-links {
  list-style: none;
  display: block;
  box-sizing: border-box;
  font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
  font-size: $default-font-size;
  &::after {
    content:"";
    display:block;
    clear: both;
  }
  
  /* Default Buttons */
  li a.wpfl {
      padding: $vertical-padding $horizontal-padding;
      margin: $vertical-margin $horizontal-margin;
      text-align: center;
      text-decoration: none;
      color: $text-color;
      float: left;
      transition: $transition;
      &.facebook { @include setBgColorAndHover($facebook); }
      &.twitter { @include setBgColorAndHover($twitter); }
      &.pinterest { @include setBgColorAndHover($pinterest); }
      &.linkedin { @include setBgColorAndHover($linkedin); }
      &.reddit { @include setBgColorAndHover($reddit); }
      &.googleplus { @include setBgColorAndHover($googleplus); }
      &.youtube { @include setBgColorAndHover($youtube); }
      &.instagram { @include setBgColorAndHover($instagram); }
      &.vine { @include setBgColorAndHover($vine); }
      &.flickr { @include setBgColorAndHover($flickr); }
      &.tumblr { @include setBgColorAndHover($tumblr); }
      &.vimeo { @include setBgColorAndHover($vimeo); }
      &.stumbleupon { @include setBgColorAndHover($stumbleupon); }
      &.behance { @include setBgColorAndHover($behance); }
      &.bitbucket { @include setBgColorAndHover($bitbucket); }
      &.foursquare { @include setBgColorAndHover($foursquare); }
      &.pocket { @include setBgColorAndHover($pocket); }
      &.github { @include setBgColorAndHover($github); }
      &.lastfm { @include setBgColorAndHover($lastfm); }
      &.slideshare { @include setBgColorAndHover($slideshare); }
      &.skype { @include setBgColorAndHover($skype); }
      &.soundcloud { @include setBgColorAndHover($soundcloud); }
      &.twitch { @include setBgColorAndHover($twitch); }
      &.trello { @include setBgColorAndHover($trello); }
      &.wordpress { @include setBgColorAndHover($wordpress); }
      &.wikipedia { @include setBgColorAndHover($wikipedia); }
    }
  
  /* Rounded Corner Buttons */
  &.rounded li a.wpfl {
    border-radius: 3px;
  }
  
  /* Buttons With Full Borders */
  &.border li a.wpfl {
    &.facebook { border: solid $border-size darken($facebook, 15%); }
    &.twitter { border: solid $border-size darken($twitter, 15%); }
    &.pinterest { border: solid $border-size darken($pinterest, 15%); }
    &.linkedin { border: solid $border-size darken($linkedin, 15%); }
    &.reddit { border: solid $border-size darken($reddit, 15%); }
    &.googleplus { border: solid $border-size darken($googleplus, 15%); }
    &.youtube { border: solid $border-size darken($youtube, 15%); }
    &.instagram { border: solid $border-size darken($instagram, 15%); }
    &.vine { border: solid $border-size darken($vine, 15%); }
    &.flickr { border: solid $border-size darken($flickr, 15%); }
    &.tumblr { border: solid $border-size darken($tumblr, 15%); }
    &.vimeo { border: solid $border-size darken($vimeo, 15%); }
    
    &.stumbleupon { border: solid $border-size darken($stumbleupon, 15%); }
    &.behance { border: solid $border-size darken($behance, 15%); }
    &.bitbucket { border: solid $border-size darken($bitbucket, 15%); }
    &.foursquare { border: solid $border-size darken($foursquare, 15%); }
    &.pocket { border: solid $border-size darken($pocket, 15%); }
    &.github { border: solid $border-size darken($github, 15%); }
    &.lastfm { border: solid $border-size darken($lastfm, 15%); }
    &.slideshare { border: solid $border-size darken($slideshare, 15%); }
    &.skype { border: solid $border-size darken($skype, 15%); }
    &.soundcloud { border: solid $border-size darken($soundcloud, 15%); }
    &.twitch { border: solid $border-size darken($twitch, 15%); }
    &.trello { border: solid $border-size darken($trello, 15%); }
    &.wordpress { border: solid $border-size darken($wordpress, 15%); }
    &.wikipedia { border: solid $border-size darken($wikipedia, 15%); }
  }
  
  /* Buttons With Bottom Borders */
  &.border-bottom li a.wpfl {
    &.facebook { border-bottom: solid $border-size darken($facebook, 15%); }
    &.twitter { border-bottom: solid $border-size darken($twitter, 15%); }
    &.pinterest { border-bottom: solid $border-size darken($pinterest, 15%); }
    &.linkedin { border-bottom: solid $border-size darken($linkedin, 15%); }
    &.reddit { border-bottom: solid $border-size darken($reddit, 15%); }
    &.googleplus { border-bottom: solid $border-size darken($googleplus, 15%); }
    &.youtube { border-bottom: solid $border-size darken($youtube, 15%); }
    &.instagram { border-bottom: solid $border-size darken($instagram, 15%); }
    &.vine { border-bottom: solid $border-size darken($vine, 15%); }
    &.flickr { border-bottom: solid $border-size darken($flickr, 15%); }
    &.tumblr { border-bottom: solid $border-size darken($tumblr, 15%); }
    &.vimeo { border-bottom: solid $border-size darken($vimeo, 15%); }
    
    &.stumbleupon { border-bottom: solid $border-size darken($stumbleupon, 15%); }
    &.behance { border-bottom: solid $border-size darken($behance, 15%); }
    &.bitbucket { border-bottom: solid $border-size darken($bitbucket, 15%); }
    &.foursquare { border-bottom: solid $border-size darken($foursquare, 15%); }
    &.pocket { border-bottom: solid $border-size darken($pocket, 15%); }
    &.github { border-bottom: solid $border-size darken($github, 15%); }
    &.lastfm { border-bottom: solid $border-size darken($lastfm, 15%); }
    &.slideshare { border-bottom: solid $border-size darken($slideshare, 15%); }
    &.skype { border-bottom: solid $border-size darken($skype, 15%); }
    &.soundcloud { border-bottom: solid $border-size darken($soundcloud, 15%); }
    &.twitch { border-bottom: solid $border-size darken($twitch, 15%); }
    &.trello { border-bottom: solid $border-size darken($trello, 15%); }
    &.wordpress { border-bottom: solid $border-size darken($wordpress, 15%); }
    &.wikipedia { border-bottom: solid $border-size darken($wikipedia, 15%); }
  }
  
  /* Buttons With Shadows */
  &.shadow li a.wpfl {
    box-shadow: 0px 2px 5px #666;
    &:hover {
      box-shadow: 0px 1px 5px #999;
    }
  }
  
  /* Pill Shaped Buttons */
  &.pill li a.wpfl {
    border-radius: 1.4em;
  }
  
  /* Hollow Buttons */
  &.hollow li a.wpfl {
    background-color: rgba(255,255,255,0);
    &.facebook { border: solid $border-size darken($facebook, 15%); color: $facebook; }
    &.twitter { border: solid $border-size darken($twitter, 15%); color: $twitter;}
    &.pinterest { border: solid $border-size darken($pinterest, 15%); color: $pinterest; }
    &.linkedin { border: solid $border-size darken($linkedin, 15%); color: $linkedin}
    &.reddit { border: solid $border-size darken($reddit, 15%); color: $reddit; }
    &.googleplus { border: solid $border-size darken($googleplus, 15%); color: $googleplus; }
    &.youtube { border: solid $border-size darken($youtube, 15%); color: $youtube; }
    &.instagram { border: solid $border-size darken($instagram, 15%); color: $instagram; }
    &.vine { border: solid $border-size darken($vine, 15%); color: $vine; }
    &.flickr { border: solid $border-size darken($flickr, 15%); color: $flickr; }
    &.tumblr { border: solid $border-size darken($tumblr, 15%); color: $tumblr; }
    &.vimeo { border: solid $border-size darken($vimeo, 15%); color: $vimeo; }
    &.stumbleupon { border: solid $border-size darken($stumbleupon, 15%); color: $stumbleupon; }
    &.behance { border: solid $border-size darken($behance, 15%); color: $behance; }
    &.bitbucket { border: solid $border-size darken($bitbucket, 15%); color: $bitbucket; }
    &.foursquare { border: solid $border-size darken($foursquare, 15%); color: $foursquare; }
    &.pocket { border: solid $border-size darken($pocket, 15%); color: $pocket; }
    &.github { border: solid $border-size darken($github, 15%); color: $github; }
    &.lastfm { border: solid $border-size darken($lastfm, 15%); color: $lastfm; }
    &.slideshare { border: solid $border-size darken($slideshare, 15%); color: $slideshare; }
    &.skype { border: solid $border-size darken($skype, 15%); color: $skype; }
    &.soundcloud { border: solid $border-size darken($soundcloud, 15%); color: $soundcloud; }
    &.twitch { border: solid $border-size darken($twitch, 15%); color: $twitch; }
    &.trello { border: solid $border-size darken($trello, 15%); color: $trello; }
    &.wordpress { border: solid $border-size darken($wordpress, 15%); color: $wordpress; }
    &.wikipedia { border: solid $border-size darken($wikipedia, 15%); color: $wikipedia; }
    &:hover {
      color: #efefef;
    }
  }
  
  /* Icons */
  &.icons li a.wpfl {
    &::before {
      font-family: FontAwesome;
      margin-right: .5em;
    }
    &.facebook::before { content: "\f09a"; }
    &.twitter::before { content: "\f099"; }
    &.pinterest::before { content: "\f231"; }
    &.linkedin::before { content: "\f0e1"; }
    &.reddit::before { content: "\f1a1"; }
    
    &.googleplus::before { content: "\f0d5"; }
    &.youtube::before { content: "\f167"; }
    &.instagram::before { content: "\f16d"; }
    &.vine::before { content: "\f1ca"; }
    &.flickr::before { content: "\f16e"; }
    &.tumblr::before { content: "\f173"; }
    &.vimeo::before { content: "\f27d"; }
    
    &.stumbleupon::before { content: "\f1a4"; }
    &.behance::before { content: "\f1b4"; }
    &.bitbucket::before { content: "\f171"; }
    &.foursquare::before { content: "\f180"; }
    &.pocket::before { content: "\f265"; }
    &.github::before { content: "\f09b"; }
    &.lastfm::before { content: "\f202"; }
    &.slideshare::before { content: "\f1e7"; }
    &.skype::before { content: "\f17e"; }
    &.soundcloud::before { content: "\f1be"; }
    &.twitch::before { content: "\f1e8"; }
    &.trello::before { content: "\f181"; }
    &.wordpress::before { content: "\f19a"; }
    &.wikipedia::before { content: "\f266"; }
    .fa {
      margin-right: .5em; 
    }
  }
  
  /* Round Buttons With Icons Only */
  &.icons-only-round li a.wpfl {
    border-radius: 50%;
    padding: .5em .333em 0 .333em;
    width: 2em;
    height: 2em;
  }
  
  /* Buttons With No Spacing */
  &.no-spacing li a.wpfl {
    margin: 0;
  }
  
  /* Small Sized Buttons */
  &.small li a.wpfl {
    font-size: $small-font-size;
  }
  
  /* Large Sized Buttons */
  &.large li a.wpfl {
    font-size: $large-font-size;
  }
  
  /* Buttons With A Gradient */
  &.gradient li a.wpfl {
    /* $gradient-difference: 12.5%; */
    &.facebook { @include gradient($facebook); }
    &.twitter { @include gradient($twitter); }
    &.pinterest { @include gradient($pinterest); }
    &.linkedin { @include gradient($linkedin); }
    &.reddit { @include gradient($reddit); }
    &.googleplus { @include gradient($googleplus); }
    &.youtube { @include gradient($youtube); }
    &.instagram { @include gradient($instagram); }
    &.vine { @include gradient($vine); }
    &.flickr { @include gradient($flickr); }
    &.tumblr { @include gradient($tumblr); }
    &.vimeo { @include gradient($vimeo); }
    &.stumbleupon { @include gradient($stumbleupon); }
    &.behance { @include gradient($behance); }
    &.bitbucket { @include gradient($bitbucket); }
    &.foursquare { @include gradient($foursquare); }
    &.pocket { @include gradient($pocket); }
    &.github { @include gradient($github); }
    &.lastfm { @include gradient($lastfm); }
    &.slideshare { @include gradient($slideshare); }
    &.skype { @include gradient($skype); }
    &.soundcloud { @include gradient($soundcloud); }
    &.twitch { @include gradient($twitch); }
    &.trello { @include gradient($trello); }
    &.wordpress { @include gradient($wordpress); }
    &.wikipedia { @include gradient($wikipedia); }
    
  }
  
  /* "Sleek" Styled Buttons */
  &.sleek li a.wpfl {
    $sleek: #dbdbdb;
    background-color: rgba(255,255,255,0);;
    border: solid 2px $sleek;
    color: $sleek;
    &:hover {
      color: #fff;
      border: solid 2px #fff;
    }
  }
  
  /* White "Sleek" Styled Buttons */
  &.sleek-white li a.wpfl {
    $sleek-white: rgba(255, 255, 255, .6);
    background-color: rgba(255,255,255,0);
    border: solid 2px $sleek-white;
    color: $sleek-white;
    &:hover {
      color: rgba(255,255,255,1);
      border: solid 2px rgba(255,255,255,1);
    }
  }
  
  &.floating-sidebar {
    position: fixed;
    top:0;
    left:0;
    li a.wpfl {
      display: block;
      clear: both;
      font-size: 12px;
    }
  }
  
}


/*********************************************
  >> Tiny Phone Sizes <<
*********************************************/
@media screen and (max-width: 330px) {
  .wpfl-social-links {
    li a.wpfl {
      display: block;
      width: 100%;
      float: none;
      padding:.5em .15em;
    }
  }
}



/* -- Ripple effect -------------------------------- */
.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0,0,0);
}
.ink {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

  background: #fff;
  background: rgba(250,250,250,0.2);
  opacity: 1;
}

// animation effect
.ink.animate {
  -webkit-animation: ripple .5s linear;
  -moz-animation: ripple .5s linear;
  -ms-animation: ripple .5s linear;
  -o-animation: ripple .5s linear;
  animation: ripple .5s linear;
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-moz-keyframes ripple {
  100% {
    opacity: 0;
    -moz-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-ms-keyframes ripple {
  100% {
    opacity: 0;
    -ms-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-o-keyframes ripple {
  100% {
    opacity: 0;
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}

View Compiled

$('a').click(function(e){
  e.preventDefault();
});

$(document).ready(function() {
  $('.material > li > a').each(function() {
    $(this).addClass('ripple-effect');
  });
  
  
  // Ripple-effect animation
  (function($) {
    $(".ripple-effect").click(function(e){
      var rippler = $(this);

      // create .ink element if it doesn't exist
      if(rippler.find(".ink").length == 0) {
        rippler.append("<span class='ink'></span>");
      }

      var ink = rippler.find(".ink");

      // prevent quick double clicks
      ink.removeClass("animate");

      // set .ink diametr
      if(!ink.height() && !ink.width()) {
        var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
        ink.css({height: d, width: d});
      }

      // get click coordinates
      var x = e.pageX - rippler.offset().left - ink.width()/2;
      var y = e.pageY - rippler.offset().top - ink.height()/2;

      // set .ink position and add class .animate
      ink.css({
        top: y+'px',
        left:x+'px'
      }).addClass("animate");
    })
  })(jQuery);
});



function add_social_icon($current_link) {
  var classList = $current_link.attr('class').split(/\s+/);
  $.each(classList, function(index, item) {
    if (item === 'facebook') {
      $current_link.append('<i class="fa fa-facebook"></i>');
    } else if (item === 'twitter') {
      $current_link.append('<i class="fa fa-twitter"></i>');
    } else if (item === 'pinterest') {
      $current_link.append('<i class="fa fa-pinterest"></i>');
    } else if (item === 'linkedin') {
      $current_link.append('<i class="fa fa-linkedin"></i>');
    } else if (item === 'reddit') {
      $current_link.append('<i class="fa fa-reddit"></i>');
    } else if (item === 'googleplus') {
      $current_link.append('<i class="fa fa-google-plus"></i>');
    } else if (item === 'youtube') {
      $current_link.append('<i class="fa fa-twitter"></i>');
    } else if (item === 'instagram') {
      $current_link.append('<i class="fa fa-instagram"></i>');
    } else if (item === 'vine') {
      $current_link.append('<i class="fa fa-vine"></i>');
    } else if (item === 'flickr') {
      $current_link.append('<i class="fa fa-flickr"></i>');
    } else if (item === 'tumblr') {
      $current_link.append('<i class="fa fa-twitter"></i>');
    } else if (item === 'vimeo') {
      $current_link.append('<i class="fa fa-vimeo"></i>');
    } else if (item === 'stumbleupon') {
      $current_link.append('<i class="fa fa-stumbleupon"></i>');
    } else if (item === 'behance') {
      $current_link.append('<i class="fa fa-behance"></i>');
    } else if (item === 'bitbucket') {
      $current_link.append('<i class="fa fa-bitbucket"></i>');
    } else if (item === 'foursquare') {
      $current_link.append('<i class="fa fa-foursquare"></i>');
    } else if (item === 'pocket') {
      $current_link.append('<i class="fa fa-get-pocket"></i>');
    } else if (item === 'github') {
      $current_link.append('<i class="fa fa-github"></i>');
    } else if (item === 'lastfm') {
      $current_link.append('<i class="fa fa-twitter"></i>');
    } else if (item === 'slideshare') {
      $current_link.append('<i class="fa fa-twitter"></i>');
    } else if (item === 'skype') {
      $current_link.append('<i class="fa fa-skype"></i>');
    } else if (item === 'soundcloud') {
      $current_link.append('<i class="fa fa-soundcloud"></i>');
    } else if (item === 'twitch') {
      $current_link.append('<i class="fa fa-twitch"></i>');
    } else if (item === 'trello') {
      $current_link.append('<i class="fa fa-trello"></i>');
    } else if (item === 'wordpress') {
      $current_link.append('<i class="fa fa-wordpress"></i>');
    } else if (item === 'wikipedia') {
      $current_link.append('<i class="fa fa-wikipedia-w"></i>');
    }
    
  });
}


$('.icons-only li a').each(function() {
  $current_link = $(this);
  add_social_icon($current_link);
});
$('.icons-only-round li a').each(function() {
  $current_link = $(this);
  add_social_icon($current_link);
});

This Pen is owned by Chris Steurer on CodePen.

See more by @chrissteurer on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js