it-swarm.com.ru

Пользовательский стиль списка li со значком шрифта

Мне интересно, можно ли использовать классы font-awesome (или любой другой иконический шрифт) для создания собственного <li> list-style-type?

В настоящее время я использую jQuery для этого, то есть:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

Тем не менее, это не работает должным образом, когда текст <li> переносится по всей странице, так как считает значок частью текста, а не самим маркером-маркером.

Какие-нибудь советы?

134
Darrrrrren

В модуле списков и счетчиков CSS уровня 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>

Настройте padding/font-size/etc по своему вкусу и все. Вот обычная скрипка: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Это работает с любым типом иконического шрифта. FontAwesome, однако, предоставляет свой собственный способ решения этой «проблемы». Посмотрите ответ Даррррррена ниже для более подробной информации.

285
banzomaikaka

Согласно Font Awesome Документация :

<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
52
cutemachine

Я хотел бы предложить альтернативное, более простое решение, специфичное для 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>
44
Darrrrrren

Я хотел добавить к ответу JOPLOmacedo. Его решение - мое любимое, но у меня всегда были проблемы с отступом, когда в li было больше одной строки. Было трудно найти правильный отступ с полями и т.д. Но это может касаться только меня.

Для меня абсолютное позиционирование: before псевдоэлемент работает лучше всего. Я установил padding-left на ul, отрицательное положение слева на элементе: before, так же, как на padding-left ul. Чтобы получить расстояние содержимого от: before элемента right, я просто установил padding-left на li. Конечно, ли должен иметь относительную позицию. Например

ul {
    margin: 0 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :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 ... */
}

Надеюсь, это понятно и имеет ценность для кого-то другого, кроме меня.

2
habsi

Я сделал это так:

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;
}
0
Oscar Jovanny

Вы можете использовать ul {list-style-image: url("")}, если вы хотите загрузить изображение в виде значка li.

0
Jerry 132