Geek Answers Handbook

List-style-image svg less in webkit

I have a slightly strange problem with my svg-style-image-image in google chrome.

.services ul { list-style-image: url('images/check.svg'); list-style-position: inside; padding: 0; margin: 0; }

Image size should be 16px x 16px. But it seems less, about half. If I switch to png, the size will be correct. In other browsers, this seems complete.

Any ideas?

+6
source share
3 answers

since you are invoking an SVG image; You must also define the SVG on your page. It is also necessary to determine the height and width , as well as in your SVG, otherwise, by default, take 1em width and height, if not specified.

 <svg height="16px" width="16px" viewBox="0 0 16 16" version='1.1' xmlns='http://www.w3.org/2000/svg'> </svg>

It would be best to invoke the image using background:url so that height and width can be displayed, so the SVG image can be displayed correctly.

 .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; }
+10
source

I had the same issue, especially with size on iOs devices. I solved this using the: 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; }
+4
source

And if you want to have list characters that don't interfere with the float of list items, take this code: (SASS)

 ul list-style: none li margin: 1.5rem 0 position: relative li:before content: " " background-size: cover background-image: url("img/check.png") width: 1.5rem height: 1.5rem position: absolute left: -2rem
+4
source

More articles:


All Articles