Центр обучения Joomla
    Иконки для сайта: какие бывают, зачем нужны и где их брать?

    Иконки для сайта: какие бывают, зачем нужны и где их брать?

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

    Содержание

    1. Какие бывают иконки?
    2. Зачем нужны иконки на сайте?
    3. Где взять иконки для сайта?

    Какие бывают иконки?

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

    В зависимости от типа графики иконки делятся на:

    • Векторные (формат SVG).

      Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.

    • Растровые (формат PNG).

      Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.

    • Символьные (форматы шрифтов).

      В веб-дизайне нередко применяются иконочные шрифты (например: FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.

    Существуют основные следующие стили оформления иконок:

    • плоские (flat),
    • контурные (outline),
    • объемные (3D).

    Иконка с одинаковым значением в разных стилях:

    Контурная
    Плоская
    Объемная

    Зачем нужны иконки на сайте?

    Как все мы помним из детства: любая книга интереснее, если в ней есть картинки. Сайтов это касается в значительно большей степени, ведь пользователи не столько читают контент веб-страниц, сколько просматривают, а иконки способствуют улучшению восприятия представленной информации.

    Иконкам можно найти применение на любом сайте:

    1. В дополнение к пунктам навигации.

      Благодаря единому размеру, иконки в навигации способствуют скорейшему запоминанию каждого пункта. В меню сайта иконки могут полностью заменять текст в адаптивном дизайне или других случаях изменения интерфейса. Такой подход применяет в интерфейсе панели управления Joomla 4:

      Иконки в меню админки Joomla 4
      Иконки при скрытии текста пунктов меню
    2. Для функциональных кнопок.

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

      Иконки в кнопках админки Joomla 3
      Иконки на странице интернет-магазина
    3. Для обозначения любого элемента контента.

      Особенно это касается лендингов, где почти каждый элемент страницы сопровождается графическим объектом. В частности, иконки практически всегда применяются для блоков преимуществ и в призывах к действию:

      Иконки преимуществ на лендинге
    4. Для обозначения мета-информации.

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

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

    Где взять иконки для сайта?

    Иконочные шрифты

    Существуют следующие популярные иконочные шрифты, ознакомиться с которыми и скачать вы можете на соответствующих сайтах:

    • Font Awesome .

      Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.

      Иконки из Font Awesome
    • IcoMoon .

      Иконки из этого шрифта применяются в админке Joomla 3.x.

      Иконки из IcoMoon
    • Themify Icons .

      Этот бесплатный шрифт включает более 320 контурных иконок.

      Иконки из Themify Icons
    • Fontello .

      Это не шрифт, а веб-сервис, позволяющий создавать наборы нужных к применению на сайте иконок из представленного набора и сохранять их в формате шрифта.

      Сервис Fontello

    Иконки в формате изображений

    В Интернете огромное количество ресурсов, предлагающих картинки для бесплатного скачивания. Мы не будем их пречислять и вводить вас в заблуждение, а ознакомим с самым лучшим, на наш взгляд, сервисом по подбору иконок — Iconfinder .

    Iconfinder

    Iconfinder отличается:

    • более 2 750 000 бесплатных и платных иконок и их наборов в самых разных форматах;
    • удобной системой поиска и фильтрации иконок по стоимости, формату и стилю;
    • сервисом создания и изменения иконок под заказ;
    • браузерным онлайн-редактором выбранных иконок;
    • возможностью выбора размера и формата иконки для скачивания.

    Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:

    1. Переходим на www.iconfinder.com .

    2. В строку поиска вводим запрос Joomla и ищем.

    3. Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.

    4. Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128x128 px) нужно кликнуть по названию формата левом нижнем углу иконки.

    5. Если необходимо скачать в формате PNG с размером 512x512, 256x256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.

    6. Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.

    пп. 1, 2
    п. 3
    пп. 4, 5
    п. 6

    Ознакомиться с наборами иконок можно на странице Icon sets :

    Страница с наборами иконок

    Как быстро разобраться в Joomla?

      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.1

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.

       

      Базовый курс по Joomla 3.9

      В КУРСЕ ВАС ЖДЕТ:

      Видеоуроки по Joomla 3.9

      После уроков вы: зарегистрируете домен и хостинг, установите и правильно настроите CMS Joomla, установите и настроите шаблон, получите понимание как работать с Joomla.

      Лучшие расширения для Joomla

      Вы получите список и описание лучших бесплатных и платных расширений для Joomla.

      Пошаговый процесс создания сайта

      Выполните 22 действия по чек-листу и ваш сайт готов.

      Хостинг в подарок

      3 месяца качественного хостинга в подарок для беззаботного начала работы над своим проектом.
      Введите e-mail для которого нужно выставить доступ к курсу: