Size of custom spik icons css

There is a certain list in which custom icons are necessarily needed, I made them through list-style-image: url(../img/gearwheel.png);, everything works, but the icons are too large, how can I reduce them?

enter a description of the image here

As you can see, the icons are too large.

Author: Dvst8d, 2019-06-06
Source

2 answers

Option c before

ul {list-style: none;}

.custom-li {position: relative;}
.custom-li:before {
  content: '';
  background-image: url('https://gyazo.com/e353b01477115f655a179520e53b7b9c.png');
  position: absolute;
  width: 16px; height: 16px;
  background-size: 16px 16px;
  left: -22px; top: 1px;
}
<ul>
  <li class="custom-li">bubu</li>
  <li class="custom-li">bubu</li>
  <li class="custom-li">bubu</li>
</ul>

(as far as I understand, there are no options to change the size of the image in list-style-image)

 1
Author: OPTIMUS PRIME, 2019-06-06 03:04:17

Solved the problem by using the pseudo element li:before and FontAwesome:

.li-gearwheel:before {
  content: "\f013";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}
 0
Author: Dvst8d, 2019-06-06 03:04:53