Social Media Icon Customization

• 

  hayl223 · Member · Aug 24, 2013 at 6:40 am

  • Copy link
  • Add topic to favorites

  Hi everyone,

  I started with the Adelle theme and have customized it with the CSS upgrade. Is it possible to change the social media (square shaped) icons that default to this theme to my own circle shaped icons that I designed?

  Thanks!

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

• 

  thesacredpath · Member · Aug 27, 2013 at 6:13 pm

  • Copy link

  Hi, Yes you can. You will have to do the below for each social icon and use a specific selector. The following is an example for the Pinterest logo. You would upload your image to your media library, get the URL of that image and then replace URL OF IMAGE between the double quote marks with the URL of your uploaded icon. The text indent moves the text way over out of the theme, but leaves the background image (icon) clickable.

  #social-networks .pinterest-link a {
  background: url("URL OF IMAGE") no-repeat scroll center center transparent;
  text-indent: -9999px;
  }

• 

  hayl223 · Member · Aug 27, 2013 at 11:35 pm

  • Copy link

  Great!! Thank you so much for your help. I appreciate it.

• 

  thesacredpath · Member · Aug 27, 2013 at 11:50 pm

  • Copy link

  You are welcome.