Неупорядоченные списки HTML выглядят скучновато. Вы можете задать стрелочку, кружок или квадрат, но их размеры и цвета, не так просто изменить. Можно использовать list-style-image, чтобы задать картинку, но она не будет 100% совпадать с размером шрифта. Оформление списка является довольно сложной вещью, а также есть баги в старых версиях IE.
А теперь представьте себе, что, если бы мы могли использовать любой значок, в любом цвете вместо стандартного непронумерованного списка…?
Webfonts
Иконки Webfont – это векторная графика, представляющая собой иконки и символы в файлах шрифтов, которые могут быть загружены и использованы в HTML, CSS и JavaScript. Они могут масштабироваться до любого размера, предлагая превосходную совместимость с браузерами (поддержка IE6 +), а один шрифт, обычно загружается быстрее, чем несколько изображений.
Есть несколько онлайн-инструментов, которые помогут вам подобрать соответствующие значки, а затем упаковать их в файлы шрифтов с кросс-браузерной поддержкой. Мы использовали Fontello, но IcoMoon и Flaticon также в состоянии сделать подобную работу.
Замена WebFont Иконок
Во-первых, нам нужен стандартный HTML список. Мы добавим класс icon к ul тегу, а еще мы можем применить различные классы к каждому li тегу, чтобы задать различные значки:
<ul class="icon"> <li class="star">Номер 1</li> <li class="info">Номер 2</li> <li class="help">Номер 3</li> </ul>
Далее, мы установим list-style-type на none, чтобы удалить стандартное оформление списка. Затем мы установим негативный text-indent на каждый li для того, чтобы передвинуть первую линию каждого элемента списка обратно. Мы использовали 1.4em, но вы можете изменить этот размер по мере необходимости:
ul.icon
{
list-style-type: none;
}
ul.icon li
{
text-indent: -1.4em;
}
Чтобы добавить значок, мы используем один из наших наборов иконок в content свойстве li:before псевдо-элемента. Обратите внимание, что он float:left и его ширина соответствует text-indent устанавленного выше. Таким образом, это будет толкать первую строку обратно в исходное положение:
ul.icon li:before
{
font-family: bullets;
content: "\e800";
float: left;
width: 1.4em;
}
Теперь мы можем установить различные иконки WebFont в зависимости от имени класса li, например:
ul.icon li.info:before { content: "\e800"; }
ul.icon li.star:before { content: "\e803"; }
ul.icon li.help:before { content: "\e801"; }
ul.icon li.bulb:before { content: "\e804"; }
ul.icon li.hand:before { content: "\e805"; }
Кроме того, можно настроить различные свойства color, font-size и расстояние. Значки будут появляться, где вы хотите и в соответствие с размером текста списка. Теперь, оформления непронумерованных списков явяются очень легкой и интересной задачей!
