LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

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

Webfonts

Неупорядоченные списки 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 и расстояние. Значки будут появляться, где вы хотите и в соответствие с размером текста списка. Теперь, оформления непронумерованных списков явяются очень легкой и интересной задачей!

15 марта 2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".