От автора: приветствую вас, уважаемые друзья. В этом уроке мы с вами коснемся темы иконок для сайта. Из урока вы узнаете, как сделать иконки HTML с помощью кода, без использования картинок. При этом сделать иконки можно очень быстро и крайне просто, в частности мы рассмотрим один из занимательных способов использования иконок для сайта, а именно — будем использовать иконки Юникода в HTML.
 |
Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript. |
НУЖНЫ ЛИ НАМ ИКОНКИ ДЛЯ САЙТА?
Сегодня уже сложно встретить сайт, на котором не использована хотя бы одна иконка. Иконки используются сплошь и рядом: для списков, для контактных данных, для оформления информационных блоков, в меню сайта и т.д. Многие проекты даже пытаются добавить дополнительную изюминку для своего сайта, используя уникальные оригинальные иконки, создаваемые на заказ.
Исходя из этого, можно дать вполне четкий ответ: иконки важны, иконки нужны.
ВАРИАНТЫ ИСПОЛЬЗОВАНИЯ ИКОНОК НА САЙТЕ
Вариантов использования иконок для сайта — несколько. Начнем с самого древнего способа, который на данный момент можно считать уже несколько устаревшим. Заключается эта возможность в банальном вырезании иконки из макета. Полученную картинку иконки верстальщик просто вставлял в страницу html тегом img или фоном из css.
Этот способ в современной верстке уже мало используется. У него есть существенный минус: поскольку иконка — это картинка, то ее можно использовать только для конкретного дизайна, для конкретного оформления страницы. Если же завтра мы решим изменить фон сайта, то, скорее всего, придется переделывать и иконку.
Второй путь состоит в «рисовании» иконок через CSS. Это довольно оригинальный способ «на любителя». Подходит он только в некоторых конкретных случаях, например для рисования стрелок. Скажем, у нас есть элементы списка HTML и для каждого элемента необходима простая треугольная стрелочка. Некоторые «рисуют» ее средствами CSS. На мой взгляд этот вариант все же неоправданно избыточен, поскольку CSS используется не совсем по назначению.
Следующая альтернатива уже является современной и, пожалуй, наиболее популярной. Этот вариант заключается в использовании так называемых иконочных шрифтов. Например, иконочный шрифт Font Awesome. Это действительно отличное решение, имеющее массу плюсов.
Поскольку речь идет об иконочном шрифте, постольку к иконком можно применять все те же стили, что и к обычным шрифтам, т.е. задавать им цвет, размер, стиль шрифта. На а это, как вы понимаете, делает такие иконки сайта универсальными. Например, если на сайте изменится цветовое оформление, нам не нужно делать новую иконку, как в случае с картинкой. Достаточно в стилях изменить цвет иконки и продолжать использовать ее и дальше. Удобно, не правда ли?
Ну и количество иконок не может не впечатлять: 585 иконок в наборе на момент написания статьи.
Качество и разнообразие иконок может удовлетворить самый притязательный вкус. В наборе Font Awesome можно подыскать иконку практически для любых целей. Ну а простое внедрение иконки на сайт является дополнительным доводом для использования иконочного шрифта. Давайте, к примеру, возьмем список HTML и для каждого элемента списка используем иконку в виде галочки. Создадим его:
<ul> <li><a href="#">Item 1</a></li> </ul>
Теперь в стилях уберем стандартные маркеры для элементов списка:
ul{
list-style: none;
}
Скачаем и подключим иконочный шрифт Font Awesome. Из полученного после скачивания архива нас интересует папка fonts, в которой находится иконочный шрифт. Ее мы положим рядом с папкой css. Ну а в папку css положим файл стилей шрифта и подключим его в HTML:
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
Теперь найдем подходящую иконку на сайте Font Awesome. Вы можете искать подходящую иконку, просматривая весь список иконок, или попробовать воспользоваться поиском.
Иконка найдена, вставим ее перед каждым элементом:
<ul> <li><i class="fa fa-check"></i><a href="#">Item 1</a></li> </ul>
И немного оформим:
ul li i.fa{
margin-right: 10px;
font-size: 15px;
color: #ff0000;
}
В итоге мы получим симпатичную иконку для сайта.
Как видим, все крайне просто. При этом, как отмечалось выше, мы можем в любой момент изменить цвет или размер такой иконки. Это просто отлично!
Однако у иконочных шрифтов есть совсем небольшой минус — их необходимо подключать к сайту, а это дополнительные килобайты данных, иногда даже сотни килобайт. Это, конечно, немного. Но если нам нужно использовать, скажем, одну-две иконки, то подключать ради них целый шрифт… эта идея немногим может понравиться. Что же делать, спросите вы? Неужели придется вернуть к первому варианту с картинкой? Нет, не обязательно. Мы можем добавить иконку на сайт без картинки и без дополнительных шрифтов. И для этого мы обратимся к иконкам Юникода в HTML.
ИКОНКИ ЮНИКОДА
Использовать иконки Юникода также просто, как и иконочный шрифт. Вот только подключать нам ничего не нужно, поскольку эти иконки уже есть в кодовой таблице Юникода и доступны нам. Все, что нам потребуется, это найти подходящую иконку в таблице Юникода и узнать ее код. Ну а выбирать действительно есть из чего, посольку кодовая таблица Юникода содержит просто огромное количество всевозможных символов. Подобрать иконку вы можете на следующем замечательном сервисе.
Давайте найдем там галочку, возьмем ее код и добавим для наших элементов. Сделать это можно двумя путями (для каждого символа предлагается 2 кода):
<ul> <!-- так --> <li><i class="fa">✔</i><a href="#">Item 1</a></li> <!-- или так --> <li><i class="fa">✔</i><a href="#">Item 2</a></li> </ul>
Если обновить страницу, то мы почти не заметим разницы между иконкой Font Awesome и иконкой Юникода. Они практически одинаковы. Но использовав символ Юникода, мы при этом не подключали абсолютно ничего. Все работает, как говорится, из коробки. Просто великолепно!
На этом мы, пожалуй, остановимся. Пробуйте, экспериментируйте, выберите какие-нибудь оригинальные иконки, добавив тем самым дополнительную изюминку своему сайту. Ну а если что-то осталось непонятным, тогда спросите в комментариях, я попробую ответить. Удачи!
