Increase AddThis icon size

1.3k views Asked by At

I am using AddThis Sharing Buttons (Free Vesrion) and have already set the icon size via the control panel to large. The icons however are still too small for my design. Is there a hack I could use to increase the size of the icons to larger than 32x32. (Example 64x64). The code AddThis gives me is as follows:

    <!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a456a16e356b6f" async="async"></script>

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
2

There are 2 answers

1
Paul On

Unfortunately 32x32 is the largest size icon we support. However, I'll let the team know you're interested in larger sizes so it might be available in a future version of our code.

0
RayOnAir On

Adding addthis classes css to your own stylesheet works. You only need to make sure that you add them under an additional parent class like .addthis_sharing_toolbox to make sure your css takes precedence over the css defined by the addthis javascript.

The following works to increase the icons to 40x40px each, if you selected the largest icon (32x32px) in the addthis settings:

.addthis_sharing_toolbox .at-share-tbx-element.addthis_32x32_style .at-share-btn, .addthis_sharing_toolbox .at-share-tbx-element.addthis_32x32_white_style .at-share-btn {
    max-height: 40px;
    max-width: 40px;
}
.addthis_sharing_toolbox .addthis_32x32_style .at4-icon, .addthis_sharing_toolbox .addthis_32x32_white_style .at4-icon, .addthis_sharing_toolbox .at-32x32 {
    background-size: 40px auto !important;
    height: 40px;
    line-height: 40px;
    width: 40px;
}

Of course, this is valid with the current addthis script. If addthis changes the class names or html structure in its script, you will have to update your code.