Geek asks and answers

Creating Retina bullet points with images

Currently, I have a client image that I use instead of bullet points. I have it configured with the following CSS, and it works fine:

ul.benefits {
    list-style-image: url('/images/bullet-point-circle.png');
}

The problem is that the image I use intentionally doubles the size, which must be such that it can be Retina quality ... But I can not find a way to indicate the height of the image used as indicated by the marker ... Is there any other way to force image show as Retina (version 2x reduced to 12 by 12, rather than the actual size of 24 x 24)?

+1
source share
1 answer

you can do something similar to achieve the same effect:

( background li, )

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>

: http://jsfiddle.net/o17sfjto/

, ... , . :

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

More articles:


All Articles