Positioning a SVG icon as list-style-image

Question

Is there a quick and easy way for me to vertically center my SVG icon with the corresponding text? I was able to get it to be close, but I'd like to nudge it down a bit. This is as close as I've got

Here's how I'm implementing it:

HTML:

<ul class="list-goals">
<li>Some text for li number one</li>
<li>Some text for li number two</li>
<li>Some text for li number three</li>
</ul>

CSS:

    .list-goals li {
    margin-bottom: 1rem;
    background: url(../images/trophy.svg) no-repeat left top;
    padding: 0px 0 3px 24px;
}

I figure I could always use a png with built in padding, but I'd rather stick to my svg and apply positioning or padding directly to the svg icon.

Thanks for the help!

Answer 1

I know this is a late answer, but you can try this as well.

li { list-style-image: url(img/iphone.svg); } 

There is nothing else you need to do because the SVG is applied with default spacing.

Answer 2

Just use the background-position CSS property to move the image where you want it.

Here's a simple example (using a data URI image, but will work just as well with an external file):

li {
    font-size: 30px;
    list-style-type: none;
    margin-bottom: 1rem;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top;
    padding: 0px 0 3px 24px;
}

ul.better li {
  background-position: left 4px;
}

<p>ok:</p>
<ul class="ok">
<li>Text</li>
</ul>
<hr />
<p>better:</p>
<ul class="better">
<li>Text</li>
</ul>