html - 在 中使用图标并具有单独的属性？

Question

我想使用 li 和文本旁边的小图标进行导航。我设法让它工作，但我如何编辑 <li> 的属性比如颜色，填充等等。

如果我更改 .homeicon 的填充，它会移动小图标。有没有办法让 li 下的所有主要属性然后只有 .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;
 }

Answer 1

您可以尝试将图标的实际位置更改为 <li> 的子图标喜欢:

#navigation .homeicon a {
  }

并像为旧的 #navigation .homeicon { 设置样式一样设置该元素的样式.然后更改为 <li>不会直接影响图标本身。

注意:我更改了图标以便可以看到它的可视化表示

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