How to make a 25x25 px image as a bullet in ul list

Question

I've been trying to take an image from google and use it as the bullet for my ul list but it comes out to big. To code I am using is

ul.custom {
list-style: circle inside url ("any google chrome pic ");
width:25px;
height:25px;
font-size:25px;
}

Answer 1

I think you should use this css for making image bullets.

.custom-list {
list-style: none;
padding-left: 0;
}
.custom-list li {
position: relative;
padding-left: 20px;
}
.custom-list li:before {
content: '';
width: 10px;
height: 10px;
position: absolute;
background-image: url('img/bullet.png');
background-size: cover;
background-position: center;
left: 0;
top: 50%;
transform: translateY(-50%);
}

<ul class="custom-list">
<li>Dog</li>
<li>Cat</li>
<li>Monkey</li>
<li>Lion</li>
<li>Dragonfly</li>
</ul>

I hope it'll be helpful to you.

Thanks!