的名單背景CSS精靈

我有一個側邊欄垂直菜單這就需要添加一個圖標對每個項目的前離開，我已經嘗試下面的方法，但不能顯示的圖標：的名單背景CSS精靈

工具欄菜單：

<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，按照給定的例子來嘗試，仍然沒有運氣。

來源

2016-11-21 kefoseki

由於這些都只是環繞整個事情可以在沒有任何圖像來完成：

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

來源

2016-11-21 04:12:16 jeff

圖像爲樣本，應該有它 – kefoseki

圖標好。圖像未被顯示的唯一原因是圖像文件的路徑不正確。另外，您可能需要爲樣式添加寬度。 – jeff

.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; 
    }

喜歡聰明人，你可以修改所有列表

來源

2016-11-22 12:30:37

你有試過嗎？ –

的名單背景CSS精靈

回答

相關問題