Размер кастомных иконок спиков css

165
29 января 2021, 04:00

Существует некий список, в котором обязательно нужны кастомные иконки, сделал их через list-style-image: url(../img/gearwheel.png);, все работает, но иконки слишком большие, как их уменьшить?

Как видите, иконки слишком большие.

Answer 1

Вариант с 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>

(насколько понял, нет вариантов поменять размер картинки в list-style-image)

Answer 2

Решил проблему при помощи использования псевдоэлемента li:before и FontAwesome:

.li-gearwheel:before {
  content: "\f013";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}
READ ALSO
Перенос строки через JavaScript
HTML

Перенос строки через JavaScript

Пишу небольшой чатКаждое новое сообщение нужно выводить с новой строки

 175
Поворот и движение объекта
c#

Поворот и движение объекта

Я новичок в Unity и недавно у меня появилась проблема: как запрограммировать 2D персонажа с видом сверху на движение вперёд и назад, при нажатии...

 228
Как настроить кнопку в Unity?
c#

Как настроить кнопку в Unity?

Есть вот такой код:

 176
Я ответила B и F Но не уверена в верности ответа. Подскажите правильный ответ
c#

Я ответила B и F Но не уверена в верности ответа. Подскажите правильный ответ

You are testing an applicationThe application includes methods named Calculatelnterest and LogLine

 158