1. First, find the images you want to use, upload theme to your media library, and copy down the link URLs for each one.

2. Go to Links → Add New and add each social media service you'd like to—make sure to include a link to the image for each one in the "Image Address" field in the Advanced box at the bottom of the page.

3. Go to Appearance → Widgets, add the Links widget to your sidebar, check the option for "Show Link Image," and uncheck all the other options.

4. Then go to Appearance → Custom Design → CSS editor and add the following CSS:

.blogroll li {
	border: none;
	float: left;
	list-style-type: none;
	padding-right: 8px;
}

Also, should I move the icons to a sidebar I'm not using, like "footer widget area one?"

I see that you already moved them to the sidebar before I replied. I think it's easier to move the widgets around with it set like that, but for someone else reading, it really depends on your theme and what you're trying to do. For example, if the sidebar isn't shown on some pages for a theme, then the widgets won't show up on those pages either.

I am trying to get the hyperlinked social media icons from the Primary Sidebar on the left up to the top right of the page.

To do that, first you need to view the page source and figure out the unique ID for the widget you'd like to move. I looked at http://nutalon.wordpress.com/ and I found that your social media icon widget has an ID of "text-2". Here is some example CSS that uses absolute positioning to move that widget to the top of the page:

#text-2 {
	position: absolute;
	top: 65px;
}

#text-2 .widgettitle {
	display: none;
}

Note that you can adjust the top value to move the widget around on the page and you can add values like width or margin and padding if those things are needed.

I'm new to CSS - I've only copied what I've seen in other threads. I've tried copy/pasting code from other threads, but it shows up as text, not to mention it doesn't work, am I missing something?

Welcome! Copying and pasting from another thread will only work if that thread was also about the Oxygen theme. It's good that you tried some things though!

I'm new to CSS - I've only copied what I've seen in other threads. I've tried copy/pasting code from other threads, but it shows up as text, not to mention it doesn't work, am I missing something?

Also, should I move the icons to a sidebar I'm not using, like "footer widget area one?"

http://www.nutalon.wordpress.com

Thanks everyone in advance, I know you're all geniuses.

The first thing we have to do is figure out exactly what text you're going to replace with an image. If you'd like to replace a menu item, first you need to add a custom menu item with a link using the Appearance → Menus page. Each menu item gets a unique class, so you need to look it up in the page source code after the item has been added.

Here is an example using the "Supplements/Nutrition" menu item from your current setup (which has a class of "menu-item-2701"):

#nav .menu-item-2701 a {
	background-image: url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png?w=32');
	background-repeat:no-repeat;
	height: 32px;
	width:32px;
	border: none;
	text-alignment: left;
	text-indent:-9999px;
}

I'm still able to add the background image to your code (because I'm still not seeing it), and the icon shows up...so you really are very close. I'm sorry that's not more helpful!

.menu-twitter a {
}

I would guess that you didn't save the edit? Would you try again and see if it makes a difference?

I should add, you're doing a great job working on this bit of CSS - styling menus can be a little tricky.

.menu-twitter {
text-indent:-9999px;
margin-left:100px;
width:50px;
}

.menu-twitter a {
background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349920843_099375-twitter-logo-square.png') no-repeat!important;
}

Still no luck. Am I using the wrong url for the picture or maybe calling it wrong? Because I have yet to see an actual image of any kind, just the black, empty menu box. Hmm. Really appreciate all your help btw!

if I were you, I'd upload an image that fits that size element, first - it'll be easier than forcing the image to fit the element.

You will need to make this !important, so that it overrides all the #nav a stuff.

To do so:

.menu-twitter a {background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat!important;}

If you don't resize the image first, you'll soon see why I suggest you do resize.

.menu-twitter {
text-indent:-9999px;
margin-left:100px;
width:50px;
}

.menu-twitter a {
background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat;
}

any suggestions?

.menu-twitter {
text-indent:-9999px;
background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png');
background-repeat:no-repeat;
margin-left:100px;
width:50px;
}

remove all the stuff that is background related (the line "background-image" and the line "background-repeat"). You can just delete them, because both those lines are incorporated into the new line you're creating for the menu-twitter anchor selector, so they're total duplicates, which is unnecessary.

Thanks so much!

Right now, your nav a is overriding all your menu-twitter a stuff, which is where you want your twitter icon to appear.

So create a CSS class like this:

.menu-twitter a {background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat;
}

And make sure to remove the duplicated background info from the original menu-twitter item, and see how you fare.

Good luck!
-Z

I've been searching for awhile now on how to install a icon on the menubar with a custom image. Specifically, I'm trying to place a twitter icon in my menu. I got the code to work fine except it just doesn't show the image and the image is in my media. Here is what my code looks like:

.menu-twitter {
text-indent:-9999px;
background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png');
background-repeat:no-repeat;
margin-left:100px;
width:50px;
}

You can see it just showing up as a black box without the image. Am I calling the image incorrectly? Any help would greatly be appreciated