Icon images that are round have square boarders

• 

  blueflintct · Member · Jul 11, 2014 at 11:01 am

  • Copy link
  • Add topic to favorites

  I have followed the wordpress instruction to add social media icons to a sidebar/footer through a text widget successfully although I chose round .png files and they are appearing with a square boarder around each image. How can I get the images to be round?

  The instructions I used : http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

  The theme I am using is ‘twenty twelve”

  The blog I need help with is: (visible only to logged in users)

• 

  sandymcfadden · Member · Jul 11, 2014 at 4:06 pm

  • Copy link

  Hi blueflintct,

  The Twenty Twelve theme by default has a box-shadow applies to it widget images. This is causing the border that you see.

  You should be able to change that per image by putting
  style="box-shadow: none;" for each of the images. Here is the code I think you should be able to copy and paste.

  <a href="https://twitter.com/blueflintCT">
    <img style="box-shadow:none;" title="Twitter" src="https://justblueflint.files.wordpress.com/2014/07/1405092318_twitter_circle.png" alt="Twitter" width="35" height="35" />
  </a>
  <a href="http://www.pinterest.com/blueflint/">
    <img style="box-shadow:none;" title="Pinterest" src="https://justblueflint.files.wordpress.com/2014/07/1405092861_pinterest.png" alt="Pinterest" width="35" height="35" />
  </a>
  <a href="http://instagram.com/blueflint">
    <img style="box-shadow:none;" title="Instagram" src="https://justblueflint.files.wordpress.com/2014/07/1405092969_instagram_circle_color.png" alt="Instagram" width="35" height="35" />
  </a>
  <a href="https://www.linkedin.com/profile/view?id=213533453&trk=nav_responsive_tab_profile_pic">
    <img style="box-shadow:none;" title="Linkedin" src="https://justblueflint.files.wordpress.com/2014/07/1405092347_linkedin_circle.png" alt="Linkedin" width="35" height="35" />
  </a>