CodePen

HTML

            
              <ul 
  class="socialcount" 
  data-url="http://www.css-tricks.com/5-use-cases-for-icon-fonts" 
  data-counts="true" 
  data-share-text="5 Use Cases for Icon Fonts">
 
  <li class="facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.css-tricks.com/5-use-cases-for-icon-fonts" title="Share on Facebook">
      <span class="count entypo-thumbs-up"></span>
    </a>
  </li>
  <li class="twitter">
    <a href="https://twitter.com/intent/tweet?text=http://www.css-tricks.com/5-use-cases-for-icon-fonts/" title="Share on Twitter">
      <span class="count entypo-twitter"></span>
    </a>
  </li>
  <li class="googleplus">
    <a href="https://plus.google.com/share?url=http://www.css-tricks.com/5-use-cases-for-icon-fonts/" title="Share on Google Plus">
        <span class="count entypo-gplus"></span>
    </a>
  </li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://weloveiconfonts.com/api/?family=entypo);

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* entypo */
[class*="entypo-"]:before {
  font: 2.5em/1.9em 'entypo', sans-serif;
}

html,
body {
 height:100%;
 width:100%;
 overflow:hidden;
 background:#333;
 background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png);
}

.socialcount {
  padding:0 2em;
  margin:0 auto;
  margin-top:4em;
  
  > li {
    width:32.9%;
    border-radius:0;
    transition:all .3s ease-in-out;
    margin:0 0 2em 0;
    cursor:pointer;
    
    &:hover [class*="entypo-"]:before {
      opacity:0;  
    }
  }
  
  iframe {
    transform: scale(1.65, 1.65); 
  }
  
  .button {
    top: 50%;
    margin: -.75em 0 0 0;
    height:2em;
  }
  
  .facebook {
    background:rgba(59, 89, 152, .7); 
  }
    
  &.like .facebook iframe {
    width:8em;
  }
  
  .twitter {
    background: rgba(0, 172, 237, .7);  
  }
  
  .googleplus {
    background: rgba(172, 0, 0, .7);  
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               /**
  Icon Fonts - SocialCount meets Style
  
  # What? #
  For my article "5 Use Cases for Icon Fonts" on CSS-Tricks. 
  http://css-tricks.com/five-use-cases-for-icon-fonts

  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................