Question: I am attaching my fiddle. When you look at it, at the top right corner you will see "Account" and "Logout". Instead of the "Logout" text, I want there to be an "off" image that you will find in the CSS portion. How do i do that?

`URL:`<https://jsfiddle.net/mikoo1991/pk6baz1z/1/embedded/result/>

Answer: 
The other answers here address your issue which was that you forgot to add the id in your html. However, I'd like to point out that adding a background image like this is not the best way to accomplish the desired results.

Honestly, you'd be better off using icons like [FontAwesome](https://fortawesome.github.io/Font-Awesome/get-started/) for this, this is exactly what they are made for:

Simply add this to your head tag:

`<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">`

OR add this to your css file:

`@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');`

And then the updated html would look like this:
`<li><a href="#">Logout<i class="fa fa-power-off mar-l-10"></i>`

---

**Here is what you'd get:**

[![enter image description here](https://i.stack.imgur.com/7BetV.png)](https://i.stack.imgur.com/7BetV.png)

### Here is an updated [jsFiddle](https://jsfiddle.net/DelightedDoD/pk6baz1z/9/)

I made some tweaks to your CSS to make it look good with the icon. Also, I changed your `height:7%` on the header to 55px. IMHO, using a percentage for a header is a bad idea as it will shrink too much on mobile devices and most headers are a fixed height anyway so setting it explicitly is usually safe.

If you want just the icon, simply remove the text and adjust the padding/font-size if needed.
It looks as if you were trying to embed a container inside a list item.

The list item only allows inline elements to be embedded i.e. span, a.

If you use logout-btn as the ID in the a tag, you will see the image show up (additional styling will be required).

```
<ul>
  <li><a href="#">Account</a></li>
  <li><a id="logout-btn" href="#">
  </a></li>
</ul>

```

[jsfiddle](https://jsfiddle.net/pk6baz1z/4/) -- Solely an example of the image displaying -- I did no extra styling to get the image to display where it needs to be.