НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

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

0

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

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

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

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

 

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.