Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

Change text menu items to images

Hi,

How can you change menu items in WordPress to images? Trying to replace text menu items like "Facebook" and "LinkedIn" with their respective social media icons.

Thanks for any help!

2 Answers

Spencer Merritt
Spencer Merritt
10,615 Points
Spencer Merritt
Spencer Merritt
10,615 Points

Each menu item has a unique CSS ID, like in the following example:

  ``` <li id="menu-item-765"> <a href="http://menu.item/url/">Some Menu Item</a> </li> 

Create your menu and look at the page source to find your menu ID's. You can set a background image to the menu item and hide the text using CSS. Using the above example:

 ```css
li#menu-item-765 a {
  display: block;
  background-image:url('http://url.to/yourbackgroundimage.jpg');
  background-repeat: no-repeat;
  width: 100px;
  height: 50px;
  text-indent: -9000px;
}

You could use font-size: 0; instead of text-indent if you want.

Also there are several plugins to do this for you.

Spencer Merritt
Spencer Merritt
10,615 Points
Spencer Merritt
Spencer Merritt
10,615 Points

Inspect the menu items in your browsers developer tools. You'll see classes assigned to those menu items. Use CSS to add a background image and the proper height and width.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Thanks Spencer! I actually have already tried that but to no avail... Not sure why it's not working.