list-style-image svg smaller in webkit
I had the same problem, especially with the size on iOs devices. I solved it by using a :before attribute
.services ul {
list-style: none;
padding: 0;
margin: 0;
}
.usp ul li:before {
content: url('images/check.svg');
width: 16px;
height: 16px;
margin-right: 10px;
}
since you are calling the SVG image; you have to define SVG on your page as well. It is also mandatory to define the height
and width
as well in your SVG otherwise by default its take 1em
width and height if not mentioned.
<svg height="16px" width="16px" viewBox="0 0 16 16" version='1.1' xmlns='http://www.w3.org/2000/svg'>
</svg>
It would be better way to call the image by using background:url
this way a height
and width
can given to image, so the SVG image
could rendered properly.
.services li:before {
content:'';
display:inline-block;
height:1em;
width:1em;
background-image:url('images/check.svg');
background-size:contain;
background-repeat:no-repeat;
padding-left: 2em;
}