custom social icons

[R. whitehouse]

Hello,

I had put, changing the social media icons out to add a custom icon, on hold but need to move forward with this edit. I had the below topic:

Custom social media icon and link

I really would rather not edit the theme code and just make the changes via the custom css but I have been unsuccessful in having the image show up correctly. The default twitter image is overlaying and then the icon that I created is being stretched way too large. I am puzzled of what is going wrong.

Is there a detailed thread that instructs how to reinsert all of the social icons manually so that they match and have custom images? Thank you for your help!!!!

[R. whitehouse]

Please disregard this, I figured it out. Sorry to bug you. Thanks. 🙂

[R. whitehouse]

Hello. I added the custom footer social icons and all was working correctly on my mac on all browsers. My client is on a pc and notified me that they do not see the new icons, that they see the circles, the original icons. I took a look in windows parallels and the circles show and not the updated icons. Can you please let me know how to fix this? Thank you so much in advance for your help!

[Bill Robbins]

Good Morning,

I took a look and here’s a few things I noticed in the Custom CSS:

1. This spot looks like a PHP function:

   
   function add_title_attachment_link($link, $id = null) {
   	$id = intval( $id );
   	$_post = get_post( $id );
   	$post_title = esc_attr( $_post->post_title );
   	return str_replace('<a href&#039;, &#039;<a title=&quot;&#039;. $post_title .&#039;&quot; href&#039;, $link);
   }
   add_filter(&#039;wp_get_attachment_link&#039;, &#039;add_title_attachment_link&#039;, 10, 2);
   

   which won’t run inside the Custom CSS box. Since the options “escaped” some of the characters you’ll need to find the original source of that function and then add it to the bottom of the functions.php file to include it.

   Even if you don’t need the function anymore, remove it from the custom CSS as it may throw things off.

2. Also this style:

   
   #footer-right li a.font-icon-social-facebook {
   	background: url(https://battagliahomes.com/wp-content/uploads/2014/12/FB2.png) center center no-repeat;
   	background-size: contain;
   	padding: 10px;
   }
   }
   

   has an extra closing bracket. You’ll want to remove the second one.

3. Then this one:

   
   #footer li.pinterest a,
   #footer li.pinterest a:visited {
   float: right;
   width: 20px;
   height: 20px;
   padding: 0;
   text-indent: 0;
   background: none;
   

   is missing its closing bracket. You’ll want to add one there.

IE is less forgiving than other browsers, so it’s possible that fixing those errors may help things work out.

Take care,
Bill

[R. whitehouse]

Thank you so much for taking the time to look at the css. I made the noted edits and now only on a pc the icons are stacked vertically not side by side. How do I force them to be side by side? Thank you again, I really appreciate your help!!

[Bill Robbins]

You can always float them. Here’s the CSS for that:

#footer-right a {
	float: right;
	display: inline;
}

Have a great weekend,
Bill

[R. whitehouse]

I added this code, thanks, but the icons still stack vertically on all pc browsers, not on mac browsers. I have never seen anything like this. Is there anything I can do to fix this? Thanks.

[Bill Robbins]

Occasionally with older versions of IE, you had to include a width in the parent element in order to keep that from happening. I was thinking that was an issue with IE 7 and below.

With most CSS changes, I have a method of testing them out before I post them, but with situations like this, I don’t. So I’m going to point you in the direction I would go, but ultimately you’ll have to experiment with this a bit to find the right solution.

Here’s where I would go next:

#footer-right ul {
	overflow: hidden;
	width: 60px;
}

That gives the ul that contains the icons a width. You may try experimenting with that a bit and see if it helps. If not, then thing I would try is setting a width on the #footer-right itself. You may even need a combination of the two.

After that, I would try adding a height first to the ul and then to the #footer-right.

Take care,
Bill

[R. whitehouse]

You are the BEST! It worked! Thank you so so so much for your help and expertise. Happy Holidays!

[Bill Robbins]

Glad to hear that helped out. Merry Christmas 🙂

[Author]

Posts