Применить иконки

Без иконок список на веб-странице выглядит пустым. Для пунктов списка можно применить точку или квадрат, но изменить их размер или цвет не так-то просто. Даже если указать размер изображения для стиля list-style-image — это не всегда будет совпадать с размером шрифта и расположением изображения.

Было-бы здорово, если бы мы могли вместо стандартных точек к пунктам списка добавить иконки разного цвета. К счастью есть бесплатные сервисы, которые предлагают огромный набор веб-иконок, например Font-Awesome.

Свойства Webfonts

Иконки webfont определяются как символы шрифтов, и могут использоваться в HTML, CSS и JavaScript. Их можно масштабировать до любого размера, они хорошо совместимы с браузерами IE6+. А еще Webfonts Icons на веб-странице загружается быстрее чем несколько изображений.

Существует несколько интерактивных инструментов для подбора подходящих иконок: Fontello, IcoMoon, Flaticon.

к меню ↑

Применить Webfonts

Я создал список с классами для тегов ul li, классы добавят разные иконки к каждому пункту списка:

<ul class="icon">
  <li class="home">Главная</li>
  <li class="book">Книги</li>
  <li class="cogs">Настройки</li>
  <li class="ban">Бан</li>
  <li class="trash">Удалить</li>
  <li class="pencil">Редактировать</li>
  <li class="envelope">E-mail</li>
  <li class="key">Пароль</li>
  <li class="cog">Управление</li>
</ul>

Чтобы избавится от стандартных точек для тега ul добавлен стиль list-style-type: none. Расстояние между иконкой и текстом в списке определяется стилем text-indent. Я указал значение -1.4em по мере необходимости Вы можете изменить его.

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

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

Иконка появится после применения набора иконок для тега li псевдоэлементом :before. Обратите внимание, стиль для тегов ul и li совпадает, и совпадает значение text-indent с шириной тегов, это нужно чтобы закрепит пункты списка в нужном положении.

ul.icon li:before
{
    font-family: FontAwesome;
    color:#8c8;
    content: "\f015";
    float: left;
    width: 1.4em;
}

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

ul.icon li.home:before {content: "\f015";}
ul.icon li.book:before {content: "\f02d";}
ul.icon li.pencil:before {content: "\f040";}
ul.icon li.cogs:before {content: "\f085";}
ul.icon li.ban:before {content: "\f05e";}
ul.icon li.trash:before {content: "\f014";}
ul.icon li.envelope:before {content: "\f0e0";}
ul.icon li.key:before {content: "\f084";}
ul.icon li.cog:before {content: "\f013";}

Демо

В содержании сайта для пунктов списка не обязательно писать много разных классов. Для этого есть псевдоклассы — это селекторы, которые добавят стиль в списке от их положения (нумерация).

Список в содержании сайта будет такого вида:

<ul class="icon">
  <li>Главная</li>
  <li>Книги</li>
  <li>Настройки</li>
  <li>Бан</li>
  <li>Удалить</li>
  <li>Редактировать</li>
  <li>E-mail</li>
  <li>Пароль</li>
  <li>Управление</li>
</ul>

Иконки для пунктов списка будут добавлены псевдоклассом :nth-child() и псевдоэлеметом ::before.

ul.icon li:nth-child(1)::before  {content: "\f015";}
ul.icon li:nth-child(2)::before  {content: "\f02d";}
ul.icon li:nth-child(3)::before  {content: "\f040";}
ul.icon li:nth-child(4)::before  {content: "\f085";}
ul.icon li:nth-child(5)::before  {content: "\f05e";}
ul.icon li:nth-child(6)::before  {content: "\f014";}
ul.icon li:nth-child(7)::before  {content: "\f0e0";}
ul.icon li:nth-child(8)::before  {content: "\f084";}
ul.icon li:nth-child(9)::before  {content: "\f013";}

Такой способ лучше тем, что Вы не пишите много классов в содержании сайта. А для меню, этот способ лучше тем, что вы всегда сможете применить стиль для пунктов меню по их месту в списке, потому что обычно для пунктов меню, id генерируется автоматически.

Для каждой иконки Вы можете установить любой цвет, размер шрифта и отступ.

Демо

Пример анимации WebFont Icons.

Демо

WebFont Icons просто и элегантно решает проблемы дизайнеров которые не хотят стандартный вид пунктов списка.