CODEWITHSUNDEEP
jqueryhtmlcssimage
Mikołaj Marciniak
Mikołaj Marciniak

Reputation: 890

How can I display the image correctly on the right side of my navigation bar?

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/

Upvotes: 0

Views: 89

Answers (3)

Wesley Smith
Wesley Smith

Reputation: 19571

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 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

Here is an updated jsFiddle

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.

Upvotes: 1

richTheCreator
richTheCreator

Reputation: 1418

<li><a id="logout-btn" href="#">
....
</a></li>

I just added the id do to your link tag and added .... characters in the html list item to add width to the image background.then turned the opactiy to zero,removed float right, and a few other styles applied, see below.

#logout-btn {
border: 0px solid black;
background-image:url('https://cdn3.iconfinder.com/data/icons/token/128/Power-Shutdown.png');
background-size: contain;
background-repeat: no-repeat;
color: rgba(0, 0, 0, 0)
}

Here's the jsfiddle

Upvotes: 0

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

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 -- Solely an example of the image displaying -- I did no extra styling to get the image to display where it needs to be.

Upvotes: 0

Related Questions