Installing Social Icons in a Menu

[Critter]

Guys. I've done this before with an older theme. I think my problem is selector versus class attributes.

Phase 1
I've FTP'd my social icons into my WordPress files

Phase 2
I've inserted the following code in my style sheet:

/* Social Media Icons
------------------------------------------------------------ */

#header ul li.social-facebook,
#header ul li.social-linkedin,
#header ul li.social-youtube,
#header ul li.social-rss,
#header ul li.social-email {
float: left;
}

#header ul li.social-facebook a,
#header ul li.social-facebook a:hover,
#header ul li.social-linkedin a,
#header ul li.social-linkedin a:hover,
#header ul li.social-youtube a,
#header ul li.social-youtube a:hover,
#header ul li.social-email a,
#header ul li.social-email a:hover,
#header ul li.social-rss a,
#header ul li.social-rss a:hover {
display: block;
height: 32px;
margin: 0 0 0 10px;
padding: 0;
text-indent: -9999px;
width: 32px;
}

#header ul li.social-facebook a {
background: #5bb1f9 url(images/32X32_facebook.png);
}

#header ul li.social-facebook a:hover {
background: #B7F46E url(images/32X32_facebook.png);
}

#header ul li.social-linkedin a {
background: #3D2D84 url(images/32X32_linkedin.png);
}

#header ul li.social-linkedin a:hover {
background: #B7F46E url(images/32X32_linkedin.png);
}

#header ul li.social-youtube a {
background: #A0000F url(images/32X32_youtube.png);
}

#header ul li.social-youtube a:hover {
background: #B7F46E url(images/32X32_youtube.png);
}

#header ul li.social-rss a {
background: #FF9500 url(images/32X32_rss.png);
}

#header ul li.social-rss a:hover {
background: #B7F46E url(images/32X32_rss.png);
}

#header ul li.social-email a {
background: #FFCE00 url(images/32X32_email.png);
}

#header ul li.social-email a:hover {
background: #B7F46E url(images/32X32_email.png);
}

Commentary

* I'm not too sure that I need hashtags with the word header in my code
* I want to insert my icons after my menu links (Real Talk Articles, How To Videos, Ebooks, About)
* I wanted to my menu to mock the the Copyblogger site to a certain degree
* As far as inserting the icons in the menu goes, does this sound like a good idea? Seemed appropriate to me.

Any ideas on what I'm doing wrong and can you give me a couple suggestions that will make this idea work?

If you didn't know, the icons won't appear using my current the set up.

Thank!

---

Clay Moseley

http://claysplans.com

[Brad Dalton]

Create a new widget in the nav menu

---

Tutorials for StudioPress Themes.

[Critter]

About to try this Brad. Thanks as always. But does this mean I should go ahead and use the simple social icons plugin to drop in the widget? If so, that's awesome.

I'm assuming that once I add that code to my PHP a new widget will be registered. Correct me if I'm wrong.

---

Clay Moseley

[Brad Dalton]

That's right, then you can add anything you like into the widget.

Be aware that you may need to use CSS to position the widget correctly in the theme as all themes are coded differently i haven't provided all the CSS for this.

---

Tutorials for StudioPress Themes.

[Critter]

Brad-

I left a message on your site. I'm still playing around with it. The widget is registered, I just don't know how to set up the CSS to get the icons to appear. When I drop the simple social icon widget I get nothing. If you can provide a couple more nudges that would be awesome. Thank you for your help so far.

---

Clay Moseley

[Brad Dalton]

Hey Clay

The code on my site generates exactly what you see in the screenshots on my site.

Happy to answer any question about the code on my site, in the comments on my site. Thanks

---

Tutorials for StudioPress Themes.

[Brad Dalton]

You will need to configure the social widgets settings and add your URL's to get the buttons to display.

---

Tutorials for StudioPress Themes.

[Critter]

Sorry man. Been away. I'm gonna see what I can do. Thanks for the reply.

---

Clay Moseley

[Critter]

Closing this thread Brad. I'll reply on your site for now on.

---

Clay Moseley

[Author]

Posts