Positioning a SVG icon as list-style-image

user_10000291 0
Viewed 16424

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!

icons svg css
3 Answers

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.

user_106012860

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>

user_16798490

Given this simple SVG example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
  </g>
</svg>

If I were to change the viewBox to viewBox="0 -20 600 600", it would move the image down -20 units. The result would be this in browser (-20 on right):

enter image description here

user_24912270
Related