Custom social media icon and link

[R. whitehouse]

Hello,

I was hoping you could help direct me with instructions for adding a custom social media icon and link. My client wants a Houzz icon linked to their page. Thanks so much for your help!

[R. whitehouse]

Just found the below thread with instructions….please disregard this ticket. Thanks.

Instagram in social media

[Bill Robbins]

You beat me to it. If you’d rather not modify the theme, you can also repurpose one of the other icons that isn’t being used. You would still need to upload the file and copy the URL to it like the other post describes. But instead of adding a new spot to the footer.php file, you could add this to the Custom CSS instead:

#footer-right .font-icon-social-twitter:before {
	content: "";
	background-color: transparent;
	display: none;
	border-radius: 0;
}

#footer-right li a.font-icon-social-twitter {
	background: url(https://yoursite.com/image.png) center center no-repeat;
	background-size: contain;
	padding: 20px;
}

You would need to replace the http://yoursite.com/image.png with the URL to your image. Also you can exchange the “twitter” in the snippet above for one of the networks you’re not using. Then you can use that network’s spot in the theme options page to add the link.

The advantage of using this way would be you be able to update the theme more easily in the future since the file won’t have been edited.

Take care,
Bill

[R. whitehouse]

I tried following the steps from the instructions and the link and image shows up but it does not have the same styling as the other social media icons. please advise. thanks!!!!!

Attachments:

1. 

   Screen-Shot-2014-10-23-at-4.07.20-PM.png
   

[R. whitehouse]

This reply has been marked as private.

[Bill Robbins]

You’ll have to use an image editor to make the styling match. The theme’s icons are made with an icon font. Since that network’s icon isn’t one of the ones included, we’ll have to actually change the icon’s image file to match.

[R. whitehouse]

I see. I added the image but with the alternate way the image does not show up at all now. only the forrst image shows up even though I changed the icon image url out to my image that I uploaded to media

Attachments:

1. 

   Screen-Shot-2014-10-23-at-4.42.37-PM.png
   

[R. whitehouse]

I can recreate the image in a circle but what about the theme functionality to change move over colors?

[Bill Robbins]

Try using Twitter from the example above to see if we can get it working first. That will help narrow down where the trouble is.

You could create a second image that corresponds with the hover state of your icons. We could swap out the image when you hover with css.

[R. whitehouse]

Is there a thread you can direct me to for the hover css that corresponds with the social icons?

[R. whitehouse]

Hello again, I changed back to the original suggestion and created a custom icon but it does not line up correctly. I tried editing the css code to -20 top padding but it does not budge. Do you have any suggestions for me? Sorry for all the questions. Thanks.

Attachments:

1. 

   Screen-Shot-2014-10-23-at-5.28.00-PM.png
   

[Bill Robbins]

Padding actually always has to be a positive number, but margins can be negative. You could also make that item have a position: relative and then use the top property to move it up. That would look something like this in CSS:

#footer li.twitter a {
     position: relative;
     top: -10px;
}

See if that doesn’t move things around for you.

[Author]

Posts