Recently I was asked to make bigger social icons for Addthis widget. Addthis provides maxiumum of 32×32 size of social icons(ref). You can add your bigger images instead, by using following code.
|
1 2 3 4 5 6 7 |
<div class="addthis_toolbox addthis_default_style addthis_32x32_style addthis_margin"> <a class="addthis_button_facebook"><img src="/assets/img/fb_logo.png" id="fb_share" class="social_buttons" alt="Share On Facebook"/></a> <a class="addthis_button_twitter"><img src="/assets/img/twitter_logo.png" class="social_buttons" alt="Share On Twitter"/></a> <a class="addthis_button_linkedin"><img src="/assets/img/linkedin_logo.png" class="social_buttons" alt="Share On Twitter"/></a> <a class="addthis_button_pinterest_share"><img src="/assets/img/pinterest_logo.png" class="social_buttons" alt="Share On Twitter"/></a> <a class="addthis_button_google_plusone_share"><img src="/assets/img/google_plus_logo.png" class="social_buttons" alt="Share On Twitter"/></a> </div> |
So, basically I have added <img> tags between the anchor <a> tags in above code. Please set the image “src” paths accordingly. <img> tags are containing the class “social_buttons”. Here is the css code for this class.
|
1 2 3 4 5 6 7 8 9 10 11 |
.social_buttons { width: 64px; height: 64px; } /* Mobile Portrait */ @media only screen and (max-width: 479px) { .social_buttons { width: 34px; height: 34px; } } |
Thats it for bigger social icons. I will also share code for custom addthis social URLs in my next post.