CSS list-style-image size
Try using a <img />
tag instead of setting the list-style-image
property. Setting the width
and height
properties in CSS will crop the image, but if you use a <img />
tag, the image can be re-sized using the value specified by width
and height
(CSS) properties or (HTML) attributes for that <img />
element.
How to resize list style image
To get rid of the bullet points try using
list-style-type: none;
Just put it into the li or ul selector.
To resize the images i would just use an html tag instead of inserting the image using css. This way you can resize the image in the html tag.
<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>
How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?
I would approach solving this problem using a pseudo element before each li
Here is the markup
ul { list-style: none;}
li { position: relative;}
li:before { /* The desired width gets defined in two places: The element width, and background size. The height only gets defined once, in background size. */ position: absolute; display: block; content: '\2022'; /* bullet point, for screen readers */ text-indent: -999999px; /* move the bullet point out of sight */ left: -.75em; width: .4em; /* desired width of the image */ height: 1em; /* unrelated to image height; this is so it gets snipped */ background-repeat: no-repeat; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4='); background-size: .4em .7em; background-position: 0 .3em;}
.small-list { font-size: 85%;}
.large-list { font-size: 150%;}
<ul class="small-list"> <li>The goal is to make the chevron smaller for this list</li> <li>Specifically, just slightly smaller than capital letters, as stated.</li> <li>Nomas matas</li> <li>Roris dedit</li></ul> <ul class="large-list"> <li>And larger for this list</li> <li>Multiline list item<br>for testing</li> <li>Nomas matas</li> <li>Roris dedit</li></ul>
CSS list bullet custom image size
You can do this two ways Do whatever suits you best. I hope that what you wanted.
Using background
property
You need to do background
and your image url
.
ul {
list-style: none;
width: 100%;
}
ul li::before {
filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%);
margin-right: 5px;
display: inline-block;
width: 16px;
height: 16px;
content: "";
background: url("https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png");
background-size:20px 20px;
}
li {
display: list-item;
}
<div class="benefits">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
list-style-image svg smaller in webkit
since you are calling the SVG image; you have to define SVG on your page as well. It is also mandatory to define the height
and width
as well in your SVG otherwise by default its take 1em
width and height if not mentioned.
<svg height="16px" width="16px" viewBox="0 0 16 16" version='1.1' xmlns='http://www.w3.org/2000/svg'>
</svg>
It would be better way to call the image by using background:url
this way a height
and width
can given to image, so the SVG image
could rendered properly.
.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;
}
Adjust list style image position?
Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.
Using a combination of background and padding styles can create something that looks similar e.g.
li {
background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart article has a good starting reference.
How to control size of list-style-type disc in CSS?
I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.
.moreLinks li {
background: url("bullet.gif") no-repeat left 5px;
padding-left: 1em;
}
Also, you may want to move your DIV
outside of the UL
. It's invalid markup as you have it now. You can use a list header LH
if you must have it inside the list.
Increase size of list-style-bullet type
Might not work in old version of IE.
li:before{ content:'\00b7'; font-size:100px; }
Demo
For IE6:
Without javascript or images, I would recommend putting a <span>·</span>
in the beginning of every list item and styling that.
Help With list-style-image
You can use the vertical-align
property to specify centered alignment. Like so:
.class li {
vertical-align: middle;
}
Related Topics
Setting The Height of a Select in Ie
What Does The Shrink-To-Fit Viewport Meta Attribute Do
How to Get Rid of X and Up/Down Arrow Elements of a Input Date
How to Hide Full Screen Button of The Video Tag in HTML5
Why Does .Class:Last-Of-Type Not Work as I Expect
Make Flex Container Take Width of Content, Not Width 100%
HTML Tab Interface Using Only CSS
Rendering a Hierarchy of "Option"S in a "Select" Tag
Is It Correct to Use Div Inside Form
Align Images Side by Side in HTML