Иконки из символов



Влад Мержевич

Кодировка UTF-8 позволяет не только одновременно вставлять текст на нескольких языках, но и добавлять разные символы, которые с успехом могут применяться как элементы дизайна, а также вместо некоторых изображений. Вот какие плюсы это сулит:

  • меньше пересылаемый объём данных по сравнению с изображениями;
  • к текстовому символу можно легко применить любое стилевое оформление;
  • опять же легко изменить стиль символа при наведении на него курсора мыши;
  • допустимо увеличивать размер без потери качества.

К минусам можно отнести малый набор символов для оформления, они могут чуть отличаться по своему виду в разных операционных системах, их нельзя отредактировать и они одноцветные.

Вставка символов

Поскольку мы имеем дело с UTF-8, то копирование и вставка символа в код весьма упрощается. Достаточно найти программу, которая отображает нужные символы, скопировать понравившийся и напрямую вставить его в текстовый редактор. В Windows можно использовать программу «Таблица символов», окно которой показано на рис. 1.

Таблица символов

Рис. 1. Таблица символов

Вид символов сильно зависит от выбранного шрифта, поэтому ставьте тот, который будете использовать в дальнейшем на странице. На рис. 1, в частности, показан шрифт Arial.

В редакторе Libre Office, как и в Open Office вставка символа делается через меню Вставка > Специальные символы (рис. 2).

Специальные символы в Libre Office

Рис. 2. Специальные символы в Libre Office

В окне следует выбрать символ и нажать кнопку ОК, тогда символ вставится в редактируемый текст, откуда его можно будет скопировать и вставить уже в HTML-код.

Также существуют специальные сайты, предоставляющие набор символов. Мне понравился сайт www.utf8icons.com (рис. 3), ничего лишнего, символы сгруппированы по темам, каждый символ показан в трёх размерах и приводится вид для разных шрифтов (рис. 4).

Главная страница utf8icons.com

Рис. 3. Главная страница utf8icons.com

Описание выбранного символа

Рис. 4. Описание выбранного символа

Чтобы заполучить себе символ, нажимаем кнопку «Copy», либо просто выделяем его и копируем через Ctrl+C. Иконки Для начала сделаем верхнее меню, содержащее иконки и подписи к нему, а затем поэкспериментируем с его дизайном (пример 1). В самом меню ничего необычного нет, за исключением того, что вместо картинок вставлены символы.

Пример 1. Верхнее меню

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   body { margin: 0; }
   .menu {
    background: #2eb135; /* Цвет фона */
    margin: 0; /* Убираем отступы */
    font-family: Arial, sans-serif; /* Шрифт */
   }
   li {
    display: inline-block;
    list-style: none; /* Убираем маркеры */
    width: 90px; /* Ширина */
    text-align: center; /* Выравниваем по центру */
   }
   .icon {
    font-size: 3em; /* Размер иконок */
    display: block; /* Блочный элемент */
   }
   .menu a {
    color: #fff; /* Белый цвет */
    text-decoration: none; /* Убираем подчёркивание у ссылок */
    padding: 0 0 5px; /* Поле снизу */
   }
  </style>
 </head>
 <body>
  <ul class="menu">
   <li><a href="1.html"><span class="icon">♋</span>Гороскоп</a></li>
   <li><a href="2.html"><span class="icon">☀</span>Погода</a></li>
   <li><a href="3.html"><span class="icon">♫</span>Музыка</a></li>
   <li><a href="4.html"><span class="icon">☥</span>Религия</a></li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 5.

Меню с иконками

Рис. 5. Меню с иконками

Дизайн иконок

Что можно сделать для дизайна самих иконок и при наведении на них курсора мыши? Да то же самое, что и с рядовым текстом — менять цвет текста, фона, параметры шрифта, в общем, всё что позволяют стили. Так, для изменения цвета фона под пунктом меню и, соответственно, иконкой, достаточно к стилю ссылки добавить background, и для контрастности ещё и color (пример 2).

Пример 2. Стиль для смены цвета фона и текста

.menu a:hover {
  background: #ffe71a;
  color: #000;
}

Специальные символы в Libre Office

Также можно сделать дизайн в олдскульной манере, добавив свечение вокруг иконок при наведении. Это делается с помощью свойства text-shadow, как показано в примере 3.

Пример 3. Свечение вокруг текста

.menu a:hover .icon {
  text-shadow: 0 0 15px #ff7900, 0 0 15px #ff7900, 0 0 15px #ff7900;
}

Специальные символы в Libre Office

Чтобы свечение было более заметным, мне пришлось три раза повторить параметры тени.

Ну, и не забываем про модную нынче анимацию и заставляем наши иконки весело вращаться и плавно менять цвет (пример 4).

Пример 4. Анимация при наведении

.icon {
  transition: 1s;
}
.menu a:hover .icon {
  color: #ffe71a;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

В общем, поведение и дизайн таких иконок зависит практически только от вашей фантазии.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.