Contact Info Using "F" logo for "Facebook" on Staff

[Kim Hannan]

Good Morning!

I was asked by my client to see if we can substitute the “F” icon on the contact shortcuts on the staff pages to replace the word “Facebook”.

Appreciate your support on these personalization requests!

Kim H

[Bill Robbins]

Kim,

You can do that. Paste this CSS snippet into the Custom CSS box on the styling tab of the theme options page. That should swap out Facebook and Twitter for their icons:

p.staff-meta {
	padding-top: 8px;
}

span.facebook-link a {
	float: left;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url(images/social-icons.png) no-repeat center top;
	margin-right: 10px;
	margin-top: -8px;
}

span.twitter-link a {
	float: left;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url(images/social-icons.png) no-repeat center -230px;
	margin-right: 10px;
	margin-top: -8px;
}

If you have any trouble, let me know,
Bill

[Charles Smith]

Bill
I tried the above but for some reason the icons are not displaying… Any ideas?

http://pvumc.net.onlinestructural.com/staff-group/clergy/

[Bill Robbins]

Chuck,

Sorry the rest of this thread happened via email. The image paths above are relative to the stylesheet instead of the document. That’s causing the files to not be found.

So there are two options. You can paste the code at the bottom of the style.css file or you can change the code to this:

p.staff-meta {
	padding-top: 8px;
}

span.facebook-link a {
	float: left;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url(https://pvumc.net.onlinestructural.com/wp-content/themes/epic/images/social-icons.png) no-repeat center top;
	margin-right: 10px;
	margin-top: -8px;
}

span.twitter-link a {
	float: left;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url(https://pvumc.net.onlinestructural.com/wp-content/themes/epic/images/social-icons.png) no-repeat center -230px;
	margin-right: 10px;
	margin-top: -8px;
}

which will make the paths absolute.

Let me know if you have any trouble,
Bill

[Charles Smith]

I was thinking it was a path issue… I would much rather put it style.css so I do not have to worry about absolute paths…

Thanks…

[Bill Robbins]

No problem. Have a great day.

[Author]

Posts