Статьи

Как использовать значки веб-шрифтов в качестве маркеров в списках HTML5

Январь 22, 2019

Неупорядоченные списки HTML скучны. Вы можете определить диск, круг или квадрат, но изменить их размер или цвет нелегко. Вы можете использовать list-style-image

Разве не было бы здорово, если бы мы могли использовать любой значок любого цвета вместо стандартных маркеров?

Просмотрите страницу демонстрации маркированного значка веб-шрифта …

Замечательные веб-шрифты

Я люблю значки веб-шрифтов . Это векторная графика, определяемая как символы в файлах шрифтов, которые можно загружать и использовать в HTML, CSS и JavaScript. Их можно масштабировать до любого размера, предлагая отличную совместимость с браузером (поддержка IE6 +), и один шрифт обычно загружается быстрее, чем несколько изображений.

Есть несколько онлайн-инструментов, которые помогут вам выбрать подходящие значки, а затем упаковать их в кросс-браузерные файлы шрифтов. Я использовал Fontello , но IcoMoon и Flaticon делают похожую работу.

Замена значка веб-шрифта

Во-первых, нам нужен стандартный список HTML. Мы добавим класс iconulli 

 <ul class="icon">
<li class="star">item 1</li>
<li class="info">item 2</li>
<li class="help">item 3</li>
</ul>

Далее мы установим для list-style-typenone Затем мы установим отрицательный text-indentli Я использовал 1.4em, но вы можете изменить это, чтобы увеличить или уменьшить расстояние между значками: 

 ul.icon
{
	list-style-type: none;
}

ul.icon li
{
	text-indent: -1.4em;
}

Чтобы добавить значок, мы используем один из нашего набора иконок в свойстве contentli:before Обратите внимание, что он перемещается влево и имеет ширину, которая соответствует text-indent 

 ul.icon li:before
{
	font-family: bullets;
	content: "\e800";
	float: left;
	width: 1.4em;
}

Наконец, мы можем установить различные значки веб-шрифта в зависимости от имени класса 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"; }

Просмотрите страницу демонстрации маркированного значка веб-шрифта …

Также можно установить разные colorfont-size Значки появятся там, где вы хотите, и будут соответствовать размеру текста списка.

Использование значков веб-шрифтов — это простое и элегантное решение давней проблемы… дизайнерам никогда не нужны стандартные маркеры. Он работает во всех браузерах IE8 и хорошо работает в IE6 и IE7. Я надеюсь, что вы найдете это полезным.

36
Share: