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

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


ul li span{
    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><div class="bullet"></div><div class="one">Text Text Text</div></li>
<li><div class="bullet"></div><div class="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><div class="bullet"></div><div class="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:12px 12px;
}