Social Media Icons.

• 

  nich0lasmoore · Member · Jul 2, 2015 at 5:01 pm

  • Copy link
  • Add topic to favorites

  I am trying to modify my theme so In the social media Icons, the flicker is replaced by Instagram. Currently the flicker icon is linking to my Instagram account. I also have an icon linking to Linkedin. I would like the icon to match.

  I attempted not to use the built in social media header and use CSS to link my Linkedin and Instagram on two uploaded media icons. However the placement varied between browsers and it was very messy between safari, and IE11.

  Thanks for any advice!

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

• 

  bkrone · Member · Jul 2, 2015 at 7:05 pm

  • Copy link

  I don’t know about the cross-browser issue, but the icons are coming from a ‘sprite image’.
  You will need to add an Instagram icon to the existing sprite (https://s2.wp.com/wp-content/themes/pub/academica/images/social-icon-sprite.png). Download the image, make add a new icon with your favorite image editor, then upload the new sprite image and change the reference in your css

  #social li a {
      background: rgba(0, 0, 0, 0) url("/wp-content/your-upload-path/your-new-image-name.png") no-repeat scroll left top;
      ...
  }

  Finally, you need to change the background-position of your sprite image. If you appended the new icon to the end, it would look like this:

  #social .flickr {
      background-position: 0 -125px;
  }

  The coordinate will of course depend on where you place the icon.

  Hope that helped.

• 

  nich0lasmoore · Member · Jul 2, 2015 at 7:06 pm

  • Copy link

  Thank you! I will give it a look over!