I'm trying to set custom SVG icons with CSS on a <ul>
's list items. Example:
<ul>
<li style="list-style-image: url('first.svg')">This is my first item</li>
<li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>
The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image
hack?
EDIT: Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image
workaround, using CSS3's background-size
: http://jsfiddle.net/kP375/1/
I'd use:
li{
list-style: none;
}
li::before{
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}
Thanks to Chris for the starting point here is a improvement which addresses the resizing of the images used, the use of first-child is just to indicate you could use a variety of icons within the list to give you full control.
ul li:first-child:before {
content: '';
display: inline-block;
height: 25px;
width: 35px;
background-image: url('../images/Money.png');
background-size: contain;
background-repeat: no-repeat;
margin-left: -35px;
}
This seems to work well in all modern browsers, you will need to ensure that the width and the negative margin left have the same value, hope it helps
You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image
There are three ways to do get around this while maintaining the benefits of CSS:
viewBox
that will then resize to 1em when used as a list-style-image
(Kudos to Jeremy).I did a kind of terminal emulator with Bootstrap
and Javascript
because I needed some dynamic to add easily new items, and I put the prompt from Javascript
.
HTML
:
<div class="panel panel-default">
<div class="panel-heading">Comandos SQL ejecutados</div>
<div class="panel-body panel-terminal-body">
<ul id="ulCommand"></ul>
</div>
</div>
Javascript
:
function addCommand(command){
//Creating the li tag
var li = document.createElement('li');
//Creating the img tag
var prompt = document.createElement('img');
//Setting the image
prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
//Setting the width (like the font)
prompt.setAttribute('width','15px');
//Setting height as auto
prompt.setAttribute('height','auto');
//Adding the prompt to the list item
li.appendChild(prompt);
//Creating a span tag to add the command
//li.appendChild('el comando'); por que no es un nodo
var span = document.createElement('span');
//Adding the text to the span tag
span.innerHTML = command;
//Adding the span to the list item
li.appendChild(span);
//At the end, adding the list item to the list (ul)
document.getElementById('ulCommand').appendChild(li);
}
CSS
:
.panel-terminal-body {
background-color: #423F3F;
color: #EDEDED;
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: 300px;
}
.panel-terminal-body ul {
list-style: none;
}
I hope this help you.
I achieved it by placing the image tag before the li's:
HTML
<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">
CSS
.listImage{
float:left;
margin:2px;
width:25px
}
.li{
margin-left:29px;
}
Here is an example to play with Inline SVG for a list bullet (2020 Browsers)
list-style-image: url("data:image/svg+xml,
<svg width='50' height='50'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 72 72'>
<rect width='100%' height='100%' fill='pink'/>
<path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
m-54 24v-24h9v24z'/></svg>")
width
& height
to set the sizeM70 42
to position the handrect
li{
font-size:2em;
list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}
span{
display:inline-block;
vertical-align:top;
margin-top:-10px;
margin-left:-5px;
}
_x000D_
<ul>
<li><span>Apples</span></li>
<li><span>Bananas</span></li>
<li>Oranges</li>
</ul>
_x000D_
This is a late answer but I am putting it here for posterity
You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.
The following is a 32*32 svg which I internally resized to initially display as a 10*10 image. it worked perfectly to replace the list image
<?xml version="1.0" ?><svg width="10" height="10" id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>
I then simply added the following to my css
* ul {
list-style: none;
list-style-image: url(../images/chevron-right.svg);
}
The list-style: none;
is important as it prevents the default list image from displaying while the alternate image is being loaded.
Almost like cheating, I just went into an image editor and resized the image by half. Works like a charm for me.
.your_class li {
list-style-image: url('../images/image.svg');
}
.your_class li::marker {
font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}
I'm using:
li {_x000D_
margin: 0;_x000D_
padding: 36px 0 36px 84px;_x000D_
list-style: none;_x000D_
background-image: url("../../images/checked_red.svg");_x000D_
background-repeat: no-repeat;_x000D_
background-position: left center;_x000D_
background-size: 40px;_x000D_
}
_x000D_
where background-size set the background image size.
Source: Stackoverflow.com