Making Retina Bullet Points With Images

I currently have a customer image that I am using in stead of bullet points. I have that set up with the following CSS and it works fine: ul.benefits { list-style-image: url('/

Solution 1:

you can do something like this to achieve the same effect:

(remove the bullet points and set a background to your li and then make some adjustments)

ul{
    list-style:none;
}

ulli{
 background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px12px;
}


ullispan{
    margin-left:15px;
}

html:

<ul>

<li><span>list 1</span></li>

<li><span>list 2</span></li>

<li><span>list 3</span></li>

<li><span>list 4</span></li>

<ul>

fiddle: http://jsfiddle.net/o17sfjto/

if you want this to work with multi-line text... you can use a different workaround, see here:

http://jsfiddle.net/SGz75/4/

<ul class="test">
<li><divclass="bullet"></div><divclass="one">Text Text Text</div></li><li><divclass="bullet"></div><divclass="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li><li><divclass="bullet"></div><divclass="one">Text Text Text</div></li>

css:

.test {
list-style: none;
margin: 0;
padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

.bullet{
height:20px;
width:20px;  background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px12px;
}