css sprites for list background

Question

I got a sidebar vertical menu which need to add an icon on left before each of item, I've try the way below but can't show up the icon:

sidebar menu:

<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

I've refer to use CSS sprites for list (<li>) background image, try example as given, still no luck.

score 0 · Answer 1 · answered Nov 21 '16 at 04:12

0

Since these are just circles the whole thing can be done without any images:

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

answered Nov 21 '16 at 04:12

image is for sample, should have icon in it – kefoseki Nov 21 '16 at 04:15
OK. The only reason that the images were not being displayed is that the path to the image file is incorrect. Also you might want to add a width to the styling. – Nov 21 '16 at 13:42

score 0 · Answer 2 · answered Nov 22 '16 at 12:30

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

Like wise you can modify all lists

css sprites for list background

2 Answers2