CODEWITHSUNDEEP
htmlcss
Exoon
Exoon

Reputation: 1553

Using icons in <li> and have separate properties?

I want to make a navigation using li with little icons next to the text. I managed to get it working but how can i edit the properties of <li> like color, padding etc.

If i change the padding of .homeicon it moves the little icon about. Is there a way to have all the main properties under li then just the icon under .homeicon?

JSFiddle: http://jsfiddle.net/PFQke/45/

HTML

<ul id="navigation">
    <li class="homeicon"><a href="">Home</a></li>
</ul>

CSS

#navigation {
    margin:14px;
    height:80px;
}
#navigation li {
    list-style:none;
    margin:10px;
    padding:10px;
    display:inline;
    margin-left:15px;
    font-size:16px;
    font-weight:bold;
    color:#ffffff;
    text-shadow: 1px 1px #000000;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: 4px 4px 9px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 4px 9px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 4px 9px rgba(50, 50, 50, 0.75); 
}
#navigation .homeicon {
    background: url("images/home.png") no-repeat top left;
    padding: 3px 0px 4px 25px;
 }

Upvotes: 1

Views: 116

Answers (1)

Francisco Presencia
Francisco Presencia

Reputation: 8841

You can try to change where the icon actually is to the child of <li> like:

#navigation .homeicon a {
  }

And style that element as you styled the old #navigation .homeicon {. Then the changes to <li> won't affect directly to the icon itself.

Note: I changed the icon so I could see a visual representation of it

http://jsfiddle.net/franciscop/PFQke/47/

Upvotes: 1

Related Questions