Question

我有一个侧边栏垂直菜单，需要在每个项目前面左侧添加一个图标，我尝试下面的方式，但无法显示图标：

侧边栏菜单：

<div class="sidemenu-wrapper">
    <h3 class="section-title">store</h3>
    <div class="sidebar-filter">    
        <div class="store">
            <ul>
                <li class="ico_01"><a href="../profile">shop profile</a></li>
                <li class="ico_02"><a href="../products">my products</a></li>
                <li class="ico_03"><a href="../sales">my sales</a></li>
                <li class="ico_04"><a href="../income">my income</a></li>
            </ul>
        </div>
    </div><!-- /.sidebar-filter -->
</div>

CSS：

.sidemenu-wrapper .store ul > li {
    background: url('../images/sidemenu-ico.png') no-repeat;
    height: 46px;
}
.sidemenu-wrapper .store ul > li.ico_01 {
    background-position: 0 0;
}
.sidemenu-wrapper .store ul > li.ico_02 {
    background-position: 0 46px !important;
}
.sidemenu-wrapper .store ul > li.ico_03 {
    background-position: 0 92px !important;
}

sidemenu-ico.png：

enter image description here

我参考use CSS sprites for list (<li>) background image，尝试给出的例子，但仍然没有运气。

Answer 1

由于这些只是圈子，所以可以在没有任何图像的情况下完成：

li:before {
  content: '';
  border: 6px solid #4cd900;
  border-radius: 100% 100%;
  margin-right: 10px;
  font-size: 0px;
}
.li.ico_01 { border-color: green; }
.li.ico_02 { border-color: red; }
.li.ico_03 { border-color: blue; }

Answer 2

.sidemenu-wrapper .store ul > li.ico_01 {
    background: url(PM8uh.png) no-repeat scroll 0px 0px transparent;
    line-height: 26px;
    padding: 0px 0 0 26px;
    margin: 0px 0 0 -36px;
    }
.sidemenu-wrapper .store ul > li.ico_02 {
    background: url(PM8uh.png) no-repeat scroll 0px -51px colorvalues;
    line-height: 26px;
    padding: 0px 0 0 26px;
    margin: 0px 0 0 -36px;
    }

同样，您可以修改所有列表

列表背景的css精灵

2 个答案: