Pinterst Social Icon

Hi guys,

I don’t need the YouTube icon but I do need the Pinterest icon. I tried to fix the code to insert this but it’s just coming up blank.

<ul class=”socials”>

  • I’m brand new to this and I’m positive that I’m doing something wrong. I’ve ready the support forum a bit but can only find people asking for Pinterest plugins.

    I appreciate your help! Thanks!

    • Predrag Dubajic
      • Support

      Hey Cindy,

      Hope you’re doing well today :slight_smile:

      Unfortunately Spirit comes only with those three icons and doesn’t include pinterest icon in it’s files.

      What you can do is add new Image element and in there add any Pinterest icon you like and link it to your pinterest account.

      Let us know if you need some additional assistance with this :slight_smile:

      Best regards,

      Predrag

    • Cindy
      • Flash Drive

      Haha! Wait… I just figured out that I don’t know how to do this because it’s with sprites and I just discovered that sprites were a thing, like, two days ago. Two more questions.

      1. Do I use the existing sprite file to add in new social icons? (which I’m probably wrongly assuming this is easy since it’s an .svg file)

      2. Is there a way for someone who is not a website developer to make a sprite?

    • Adam Czajczyk
      • Support Gorilla

      Hello Cindy!

      It’s made with .svg sprites indeed but you do not need to use that. I think it’s simpler to use just a “good old” .png or .gif file :slight_smile:

      Here’s what I’d suggest:

      1. Create your Pinterest icon, probably as a transparent image (both .png and .gif formats would serve transparency easily); I think you would want to use an “on mouse over” effect with that so these shoudl be two files: one for “default” icon and one for “on mouse over” icon.

      2. Upload both these files to your Media Library and note down their URL’s; this can be done via WordPress backend (your dashboard) on “Media” page;

      3. Enable Upfront editor on your site and click on “Settings” (gray “gear” icon) for social icons element; this will open a “HTML” editor

      4. Add this line there somewhere between the “ul” tags:

      <li><a class="social-icon pinterest" href="http://pinterest.com" target="_blank"></a></li>

      replacing “http://pinterest.com” with your own Pinterest URL

      5. Switch HTML editor to CSS tab and at the end of existing code add these lines:

      .pinterest:before {
      background:url('http://yourdomain.com/pinterest-default.png') center center no-repeat;
      background-size:cover
      }
      .pinterest:hover:before {
      background:url('http://yourdomain.com/pinterest-hover.png') center center no-repeat;
      background-size:cover;
      }

      replacing both URLs with relevant URLs of your own Pinterest icons.

      Save both the code editor and Upfront and it should work for you :slight_smile:

      I hope that helps!

      Best regards,

      Adam

    Thank NAME, for their help.

    Let NAME know exactly why they deserved these points.

    Gift a custom amount of points.