Мне интересно, можно ли использовать классы шрифтов - удивительные (или любые другие знаковые шрифты) для создания пользовательского стиля <li> типа списка?
В настоящее время я использую jQuery для этого, то есть:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
Однако это не соответствует правильному стилю, когда текст <li> обтекает страницу, поскольку он считает значок частью текста, а не фактическим индикатором пули.
Любые советы?
Список и счетчики CSS Module Level 3 представляет псевдоэлемент ::marker. Из того, что я понял, это допустило бы такую вещь. К сожалению, ни один браузер не поддерживает его.
Что вы можете сделать, так это добавить дополнение к родительскому элементу ul и потянуть значок в это дополнение:
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f00c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>В соответствии с Шрифт Awesome Documentation:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Barbabella</li>
<li><i class="fa-li fa fa-check"></i>Barbaletta</li>
<li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>
Или, используя Jade:
ul.fa-ul
li
i.fa-li.fa.fa-check
| Barbabella
li
i.fa-li.fa.fa-check
| Barbaletta
li
i.fa-li.fa.fa-check
| Barbalala
Я хотел бы предоставить альтернативное, более простое решение, специфичное для FontAwesome. Если вы используете другой иконический шрифт, ответ JOPLOmacedo по-прежнему идеально подходит для использования.
FontAwesome теперь обрабатывает стили списков внутренне с помощью классов CSS.
Вот официальный пример:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
Я хотел добавить к JOPLOmacedo ответ. Его решение - мой любимый, но у меня всегда была проблема с отступом, когда у li было более одной строки. Было неудобно находить правильный отступ с полями и т.д. Но это может касаться только меня.
Для меня абсолютное позиционирование: прежде чем псевдоэлемент работает лучше всего. Я установил padding-left на ul, отрицательное положение оставлено на элементе: before, так же, как ul padding-left. Чтобы получить расстояние от содержимого: до элемента right, я просто установил padding-left на li. Конечно, li должен иметь относительное положение. Например
ul {
margin: 0 0 1em 0;
padding: 0 0 0 1em; /* make space for li :before */
list-style: none;
}
li {
position: relative;
padding-left: 0.4em; /* text distance to icon */
}
li:before {
font-family: 'my-icon-font';
content: 'character-code-here';
position: absolute;
left: -1em; /* same as ul padding-left */
top: 0.65em; /* depends on character, maybe use padding-top instead */
/* .... more styling, maybe set width etc ... */
}
Надеюсь, это понятно и имеет ценность для кого-то другого, кроме меня.
Я сделал это так:
li {
list-style: none;
background-image: url("./assets/img/control.svg");
background-repeat: no-repeat;
background-position: left center;
}
Или вы можете попробовать это, если вы хотите изменить цвет:
li::before {
content: "";
display: inline-block;
height: 10px;
width: 10px;
margin-right: 7px;
background-color: orange;
-webkit-mask-image: url("./assets/img/control.svg");
-webkit-mask-size: cover;
}
Вы можете использовать ul {list-style-image: url("")} если вы хотите загрузить изображение в качестве значка li.
Просто перейдите по этой ссылке. Наслаждаться.