Social Network Icons

[Kirsten Douglas]

Before I begin my bemoaning, I have to say fabulous theme! Easy to work, instructions are clear, easily customised. I’m having a bit of an issue with the social network icons. I haven’t changed the stylesheet code, but I did a fresh install just in case I’d messed about with some of the other files (I’ve altered the layout a little), but no matter what I do, I cannot get the social network icons to show, only the font codes show. I’ve checked and double checked the codes are all untouched, even included them in the custom code, but still codes show instead icons. The site does cache for a terrific length of time but I’ve flushed the cache several times and still nothing.

Here’s a link:

http://www.gisoel.com

Also a screenshot uploaded for you.

Attachments:

1. 

   Screen-Shot-2013-09-11-at-21.46.57.png
   

[Bill Robbins]

Kirsten,

Thank you for your business first of all. I really do appreciate it. That’s most puzzling. It looks like that is supposed to be a Facebook icon before the email @ sign. The style in the style.css file that creates it should look like this:

ul.social-links li.facebook a:before,
p.staff-meta a.facebook:before {
	content: "\e03c";
	background-color: #435D9F;
}

Let’s try this. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste the code above and then update your settings. Hopefully that will bring back up your icon like it should be.

If you still have trouble, let me know and if possible, send over a link to where you’re working with it so I can take a closer look.

Thanks,
Bill

[Kirsten Douglas]

Hi Bill,

Thank you for the prompt reply! I’ve actually got the entire social network list css pasted in the custom code section

ul.social-links li.facebook a:before,
p.staff-meta a.facebook:before {
	content: "e03c";
	background-color: none;
}

ul.social-links li.forrst a:before,
p.staff-meta a.forrst:before {
	content: "e03a";
	background-color: none;
}

ul.social-links li.twitter a:before,
p.staff-meta a.twitter:before {
	content: "e02a";
	background-color: none;
}

Twitter isn’t showing either. If you use the mega menu at the top ‘Our School’ you can see only the email icon is showing. I’m totally baffled as I am 100% they were there this morning when I started working on the site.

[Bill Robbins]

Kirsten,

Thanks for sending that over. It’s very close, but there is a slash that’s missing from the “content” in each of those styles. So instead of it looking like this:

ul.social-links li.facebook a:before,
p.staff-meta a.facebook:before {
	content: "e03c";
	background-color: none;
}

you’ll need it to be like this:

ul.social-links li.facebook a:before,
p.staff-meta a.facebook:before {
	content: "\e03c";
	background-color: #435D9F;
}

Try double checking on the slash at the start of each “content” and see if that won’t help.

If you’re still stuck, let me know.

[Kirsten Douglas]

My goodness I feel a tad foolish now for bothering you. I couldn’t see the wood for the trees. 100% resolved and super quick too. Merci beaucoup Bill 🙂

[Bill Robbins]

No problem at all. I’m not much of a copy editor myself so these kind of things happen to me all the time.

Thanks again and have a great evening,
Bill

[Author]

Posts