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

CSS

Posted by John Fisher
John Fisher
7,974 Points

Icons in Nav Menu, how?

I'm trying to figure out how I can get small icons in a nav menu using css, but having trouble figuring out the best way. For example; a small house icon next to the text Home.

I've tried by making list items for the menu, then using float left, then using ::before but it doesnt seem to be working.

This is roughly what I've came up with but it doesnt work.

.menu li {
  list-style: none;
  float: left;
}
.menu a {
  margin-left: 20px;
  display: block;
  background: steelblue;
  padding: 15px;
  width: 100px;
  text-align: center;
  font-family: helvetica;
  color: white;
}
.house a::before {
  width: 35px;
  height: 35px;
  float: left;
  background: url(".../img/home78.svg") no-repeat;
  margin-right: 10px;
}

<ul class="menu">
  <li class="house"><a href="#">Home</a></li>
  <li><a href="http://www.bbc.co.uk">Blog</a></li>
  <li><a href="http://www.bbc.co.uk">About</a></li>
</ul>

What is the best approach for this? What am I doing wrong?

Thanks

Steven McKay Lowry
Steven McKay Lowry
2,015 Points 
<ul class="menu">
  <li class="house"><a href="#"><img src="img/home.png"/>Home</a></li>
  <li><a href="http://www.bbc.co.uk"><img src="img/bbc1.png"/>Blog</a></li>
  <li><a href="http://www.bbc.co.uk"><img src="img/bbc2.png"/>About</a></li>
</ul>

If this helped, please vote up! =]

3 Answers

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

I believe that the before pseudo-class is the right way to go (usually using a font-face to get the icons on there, that way they can be re-sized easily), but I remember learning that with those pseudo-classes you MUST provide a 'content:' attribute. This is where you would place the image you were interested in inserting.

this is an example directly from W3 schools;

h1::before { content: url(smiley.gif); }

John Fisher
John Fisher
7,974 Points
John Fisher
John Fisher
7,974 Points

Thanks Garrett. I've just tried something similar, and although it's a bit closer (the text seemed to budge over to make room for the pic) still no image appears...

code looks like this now.

.house::before {
  content: url(.../img/home78.svg);
  width: 35px;
  height: 35px;
  float: left;
  margin-right: 40px;
}
Garrett Levine
Garrett Levine
20,305 Points

in that code, you need to have the image source in quotes.

John Fisher
John Fisher
7,974 Points
John Fisher
John Fisher
7,974 Points

Thanks, those who answered.