Оформление списка HTML5 с использованием иконок WebFonts


Оформление списка HTML5 с использованием иконок WebFonts

Неупорядоченные списки HTML выглядят скучновато. Вы можете задать стрелочку, кружок или квадрат, но их размеры и цвета, не так просто изменить. Можно использовать list-style-image, чтобы задать картинку, но она не будет 100% совпадать с размером шрифта. Оформление списка является довольно сложной вещью, а также есть баги в старых версиях IE.

Оформление списка HTML5 с использованием иконок WebFonts

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

Webfonts

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

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

Замена WebFont Иконок

Во-первых, нам нужен стандартный  HTML список. Мы добавим класс icon к ul тегу, а еще мы можем применить различные классы к каждому li тегу, чтобы задать различные значки:

Далее, мы установим list-style-type на none, чтобы удалить стандартное оформление списка. Затем мы установим негативный  text-indent на каждый li для того, чтобы передвинуть первую линию каждого элемента списка обратно. Мы использовали 1.4em, но вы можете изменить этот размер по мере необходимости:

Чтобы добавить значок, мы используем один из наших наборов иконок в content свойствеli:before псевдо-элемента. Обратите внимание, что он  float:left и его ширина соответствует text-indent устанавленного выше. Таким образом, это будет толкать первую строку обратно в исходное положение:

Теперь мы можем установить различные иконки WebFont в зависимости от имени класса li, например:

webfonts-bullets

Кроме того, можно настроить различные свойства  color,  font-size и расстояние. Значки  будут появляться, где вы хотите и в соответствие с размером текста списка. Теперь, оформления непронумерованных списков явяются очень легкой и интересной задачей!

Источник: www.webdesignmagazine.ru

Previous Создание современных CSS3 hover-эффектов
Next Как ускорить загрузку веб-страниц

Suggested Posts

Настройка панели администратора WordPress

Модуль OpenCart — Массовое редактирование товаров

Эффективные приемы для респонсивного веб-дизайна

Хаки wordpress. Топ 10(Часть 2)

Оптимизация блога под поисковые запросы

20 свежайших JQuery плагинов для улучшения интерфейса