I’m using css marker as follows ( the svg has an atribute of 32px width and height)
.texto-caracteristica-servicios li::marker {
content: url('../img/circlecheck.svg');
}
And this happens
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" height='32' width='32' viewBox="0 0 20 20" fill="black">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
I haven’t done much with the ::marker pseudoclass in the past, but as far as I can see, there’s no way to position them independently of their respective <li>s. You could however manipulate the width, height and viewBox attributes of your SVG so that the markers are the same size as the text, and also sit on the same line:
<svg xmlns="http://www.w3.org/2000/svg" height='16' width='16' viewBox="0 0 20 16" fill="black">
That would make them look like this:
Thank you! I’m afraid doing so makes the icons look smaller… Anyways I’m using another svg, but tried to apply the same edit
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" focusable="false" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 12 30" style="enable-background:new 0 0 12 30;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#818182;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EAEAEA;}
</style>
<rect x="2.1" y="3.8" class="st0" width="7.2" height="4.7"/>
<path class="st1" d="M6,12c3.3,0,6-2.7,6-6S9.3,0,6,0S0,2.7,0,6S2.7,12,6,12z M8.8,4.7C9,4.5,9,4.1,8.8,3.9C8.6,3.7,8.3,3.7,8,3.9
l-3,3L4,5.8c-0.2-0.2-0.6-0.2-0.8,0C3,6,3,6.4,3.2,6.6l1.5,1.5c0.2,0.2,0.6,0.2,0.8,0C5.5,8.1,8.8,4.7,8.8,4.7z"/>
</svg>
That SVG has even more padding at the bottom than the other one, though.
Instead of the ::marker selector, another possibility would be to use the ::before selector on the <li>s instead. Those could easily be positioned so they sit on the same line as their <li>s.
Yes I tried it in the past but is a lot less “cleaner” method 
How should I edit this svg more or less? Can padding be added directly in the style tag of the svg? Will try that
The “padding” comes from the <path> element not fully using the whole height of the SVG, see this screenshot (the blue rectangle is the whole SVG):
You can change the values of viewBox, width and height and correct it a little (try viewBox="0 0 20 5" and a width and height of 30px), but it’s not possible to place the icon anywhere below the baseline of the text of the <li>.
Understood
Ok using this
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" focusable="false" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 20 5" style="enable-background:new 0 0 12 12;" xml:space="preserve">
Returns this, it is more aligned but the icon size is reduced.
You can make the icons bigger by setting width and height to 36px for example - but again, it’s not possible to center them vertically with their <li>.
Also, I don’t think that using the ::before selector is any less clean than the ::marker, especially if the latter doesn’t really work in this case.
I think you are correct, well I’m not aware neither of any other solution, so I’m marking your answer as the solution
Awesome - if you still need help with making it work with the ::before selector, leave a comment.
