AddThis

Instruction and Assets

Use 3rd party icon packs to change the look of your toolbox. This 32x32 set is by Komodo Media.

Download Example Try Demo

The CSS

/* Custom Icons */
.addthis_toolbox .custom_images a {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
}
.addthis_toolbox .custom_images a img {
	opacity: 1.0;
}
.addthis_toolbox .custom_images a:hover img {
    opacity: 0.75;
}

The HTML

<!-- AddThis Toolbox - Big Icons -->
<div class="addthis_toolbox">
   <div class="custom_images">
      <a class="addthis_button_facebook"><img src="social_networking_iconpack/facebook_32.png" width="32" height="32" alt="Share to Facebook" /></a>
      <a class="addthis_button_twitter"><img src="social_networking_iconpack/twitter_32.png" width="32" height="32" alt="Share to Twitter" /></a>
      <a class="addthis_button_stumbleupon"><img src="social_networking_iconpack/stumbleupon_32.png" width="32" height="32" alt="Stumble It" /></a>
      <a class="addthis_button_email"><img src="social_networking_iconpack/email_32.png" width="32" height="32" alt="Email This" /></a>
      <a class="addthis_button_more"><img src="addthis_32.png" width="32" height="32" alt="More..." /></a>
   </div>
</div>

The Javascript

Include the following AddThis script file anywhere in your page (usually before the closing </body> tag):

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID"></script>

Important: For '#pubid=YOUR-PROFILE-ID' above, change 'YOUR-PROFILE-ID' to your Profile ID if you want analytics data to be collected. If you do not want analytics, this phrase can be removed.

Want to use different services than the example above? Grab the complete icon pack from Komodo Media.

Looking for more 3rd party icon packs? Check out this collection of custom icons.