Содержание

для чего нужны, виды, форматы и правила

Пример различного оформления одного и того же набора иконок. Автор — Liubov Osipenko. Источник

Зачем используют иконки в дизайне

Иконки в дизайне — это важный элемент, который выполняет разные задачи в зависимости от местоположения и замысла автора. Вот некоторые из них.

  • Привлекают внимание. С помощью них можно расставить акценты на важных или интересных элементах дизайна, стимулируя пользователей к действию или изучению. Например, иконки могут подсказывать о новых функциях или предложениях, или указывать на интерактивные элементы.
  • Обозначают информацию. Они помогают пользователю быстро и легко узнать о теме, функции или категории элемента дизайна. Например, иконка корзины обозначает место для покупок, а иконка лупы — поиск.
Часть пака иконок для интернет-магазинов. Источник
  • Упрощают навигацию. Они могут заменять или дополнять текстовые ссылки или кнопки, делая интерфейс более понятным и удобным. Например, иконки могут показывать направление движения или перехода между страницами или экранами.
  • Структурируют контент страницы. Они помогают пользователю ориентироваться в большом количестве данных, выделяя ключевые точки и группируя похожие элементы. Например, иконки могут разделять разделы на сайте или приложении, или показывать прогресс в процессе.
Пример того, как иконки структурируют контент в блоке о преимуществах сервиса. Источник
  • Повышают конверсию. Они могут влиять на поведение и решения пользователей, увеличивая их доверие, лояльность и удовлетворенность. Например, иконки могут подтверждать успешное выполнение действия или давать положительный отзыв.

Виды иконок

Кажется, что эти маленькие картинки очень просты, незамысловаты и похожи друг на друга. Но на самом деле существует множество видов иконок. Их можно классифицировать по нескольким критериями, самыми важными из которых являются два — выполняемая функция и стилистика. Рассмотрим основные виды иконок с примерами.

Типы иконок по функции

  • Информационные. Это иконки, которые передают какую-то информацию или сообщение пользователю. Например, иконка звездочки может означать, что поле обязательно для заполнения, а иконка восклицательного знака — что есть какое-то предупреждение или ошибка.
  • Навигационные. Это иконки, которые помогают пользователю перемещаться по сайту или приложению. Например, иконка гамбургера может открывать меню навигации, а иконка стрелки — возвращать на предыдущую страницу или экран.
  • Интерактивные. Это иконки, которые запускают какое-то действие или функцию при нажатии или наведении. Например, иконка корзины может добавлять товар в список покупок, а иконка сердечка — ставить лайк или добавлять в избранное.
  • Брендовые. Это иконки, которые представляют какой-то бренд, компанию или продукт. Они могут быть частью логотипа или фирменного знака. Например, иконка яблока — это символ компании Apple.
  • Иллюстративные. Это иконки, которые изображают какой-то объект, сцену или персонажа. Они могут быть детализированными или стилизованными. Например, иконка домика может иллюстрировать раздел о недвижимости, а иконка смайлика — раздел о настроении.
Яркие иконки-иллюстрации от Patswerk. Источник
  • Метафорические. Это иконки, которые используют какую-то метафору или ассоциацию для передачи смысла или эмоции. Они могут быть абстрактными или символическими. Например, иконка лампочки может означать идею или творчество, а иконка сердца — любовь или здоровье.
  • Декоративные. Это иконки, которые не несут в себе какого-то смысла или функции, а просто украшают дизайн или подчеркивают стиль. Например, рекламный баннер может быть украшен иконками цветка, но на них не акцентируется внимание, они просто украшают фон.

Типы иконок по стилю

  • Плоские иконки. Это иконки, которые не имеют объема, теней, градиентов или других эффектов. Они состоят из простых геометрических форм и однотонных цветов. Они выглядят минималистично и современно.
Сет плоских иконок. Автор — Rehan Khan. Источник
  • Линейные иконки. Это иконки, которые состоят только из контуров без заливки. Они могут быть одноцветными или многоцветными. Они выглядят легко и элегантно.
  • 3D-иконки. Это иконки, которые имитируют трехмерный объем с помощью теней, света, перспективы и других эффектов. Они могут быть реалистичными или карикатурными. Они выглядят динамично и привлекательно.
Очень красивые трехмерные «стеклянные» иконки. Автор — Hesam Sanei. Источник
  • Фотореалистичные. Это иконки, которые стремятся к максимальному соответствию реальности с помощью деталей, текстур, света и тени. Они могут быть созданы с помощью фотографии или 3D-моделирования. Они выглядят реалистично и импрессионистично.
  • Рисованные от руки. Это иконки, которые создаются с помощью ручных инструментов, таких как карандаш, кисть или маркер. Они могут быть аккуратными или небрежными. Они выглядят творчески и оригинально.
Пример иконок, стиль которых копирует ручную рисовку. Источник
  • Минималистические. Это иконки, которые стремятся к минимальному использованию элементов дизайна, таких как формы, цвета и линии. Они могут быть плоскими или линейными. Они выглядят чисто и современно.
  • Ретро-иконки. Это иконки, которые имитируют стиль прошлых эпох или культур. Они могут использовать винтажные цвета, шрифты, узоры или формы. Они выглядят ностальгически и эклектично.

Конечно, это далеко не весь перечень видов этих маленьких картинок. Например, еще их можно классифицировать по тематике пака:

  • социальные сети;
  • бизнес;
  • интернет-маркетинг;
  • аналитика;
  • наука;
  • инновации;
  • животные;
  • бытовая техника;
  • детские товары и т. д.

Форматы иконок для сайтов и приложений

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

Растровые форматы, такие как PNG или JPG, не рекомендуются для иконок для сайтов, так как они теряют качество при масштабировании и не поддерживают прозрачность. Однако, если вы все же хотите использовать растровые иконки, то убедитесь, что они имеют достаточное разрешение и сжаты для уменьшения размера файла.Единственным исключением является favicon — маленькая иконка, которая отображается рядом с адресом сайта в браузере. Для favicon обычно используется формат ICO, который поддерживает разные размеры и глубину цвета в одном файле. Вы можете создать favicon из любого изображения с помощью специальных генераторов или конвертеров.

Основные правила создания иконок для веб-дизайна

  • Иконки должны соответствовать цели и контексту применения. Перед началом работы четко определите, на каком ресурсе будут использоваться иконки (какова тематика сайта или приложения, цветовая схема), а также в каких блоках они будут находиться и с какой целью (например, в блоке преимуществ с целью убедить пользователя обратиться в компанию). Исходя из этого, выбирайте стилистику, настроение и цвет иконок. 
  • Иконки должны быть простыми, читаемыми и узнаваемыми. Избегайте излишних деталей, сложных форм и неоднозначных символов. Используйте привычные образы, которые соответствуют теме и функции иконок. Чтобы не создавать образы с нуля, вы можете вдохновиться работами других дизайнеров на одной из площадок, где они их демонстрируют, например Behance или Dribble. 
  • Иконки в наборе должны быть согласованными и гармоничными. Следуйте одному стилю, цветовой схеме, типу линий и теней для всех иконок. Например, если вы решили использовать тонкую прерывистую линию для изображения границ значков, то все значки в вашем наборе должны иметь такие границы, то есть не добавляйте экземпляры с толстыми сплошными линиями. Также учитывайте пропорции, углы и отступы между элементами иконки. Используйте сетку для выравнивания и масштабирования иконок, чтобы они были симметричными.
Пример, когда все иконки в паке выглядят единообразно. Автор — Peter Garvin. Источник
  • Иконки должны быть адаптивными и оптимизированными. Проверяйте, как ваши иконки выглядят на разных устройствах, разрешениях и платформах. Используйте векторный формат (например, SVG), который позволяет изменять размер иконок без потери качества. Сжимайте файлы иконок для ускорения загрузки сайта.
  • Иконки должны быть информативными и функциональными. Подумайте, какую цель вы хотите достичь с помощью иконок: привлечь внимание, упростить навигацию, повысить конверсию или что-то еще. Добавляйте подписи или подсказки к иконкам, если это необходимо для понимания. 
  • Тестируйте и получайте обратную связь. Проверяйте свои иконки на разных устройствах и в разных ситуациях, чтобы убедиться в их качестве и эффективности. Спрашивайте мнение других людей, особенно потенциальных пользователей, о том, как они воспринимают и понимают ваши иконки.

5 лайфхаков по созданию дизайна иконок

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

  • Используйте готовые ресурсы и инструменты. Не стесняйтесь пользоваться бесплатными или платными библиотеками иконок, которые можно найти в интернете. Они могут помочь вам найти вдохновение или сэкономить время. Также используйте специализированные программы или онлайн-сервисы для создания и редактирования иконок.
  • Используйте сетку и направляющие. Сетка поможет вам выравнивать и масштабировать иконки, а также соблюдать пропорции и отступы. Направляющие помогут вам создавать симметричные и геометрические формы. Вы можете настроить сетку и направляющие в вашей программе для дизайна или использовать специальные плагины или сервисы.
Примеры сетки для создания иконок в руководстве по Material Design. Источник
  • Используйте копирование и отражение. Копирование и отражение — это простой способ создавать симметричные и сложные формы без лишних усилий. Вы можете копировать и отражать части иконок по горизонтали или вертикали, а также комбинировать разные формы для создания новых.
  • Используйте операции с фигурами. Операции с фигурами — это функция, которая позволяет вам объединять, вычитать, пересекать или разделять разные фигуры для создания новых в графических редакторах, например Adobe Illustrator. Вы можете использовать эту функцию для создания сложных или оригинальных форм из простых.
  • Используйте цветовые палитры и градиенты. Цветовые палитры и градиенты помогут вам подобрать гармоничные и модные цвета для ваших иконок, а также создать объем и настроение. Вы можете использовать готовые цветовые палитры или градиенты из библиотек или ресурсов, или создавать свои собственные.

Где скачать бесплатные иконки

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

Flaticon — самая большая база бесплатных иконок для любого проекта. Вы можете скачать иконки в форматах PNG, SVG, EPS, PSD и CSS. Вы также можете редактировать цвет и размер иконок, создавать коллекции и использовать плагин для Google Workspace.

Freepik — сайт с более 900 тысячами бесплатных иконок в форматах PNG, EPS и SVG. Вы можете найти иконки по разным категориям, таким как еда, бизнес, спорт и т.д.Icons8 — сайт с более 1,2 миллионами бесплатных векторных иконок в форматах SVG и PNG. Вы можете выбрать стиль иконок, такой как плоский, линейный или 3D, а также настроить цвет и размер.

Каталог иконок на сайте Icons8. Источник

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

профессия
веб-дизайнер

Научиться

ключ icons — Mozilla | MDN

ТипObject
ОбязательныйНет
Пример
"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

Ключ icons определяет, какие иконки (значки) будет использовать ваше дополнение. Эти иконки будут использоваться при показе вашего дополнения в менеджерах компонентов, таких как Менеджер Дополнений.

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

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

Вы должны указать по крайней мере одну главную иконку, в идеале размером 48х48 пикселей. Эта иконка будет использоваться по умолчанию в Менеджере Дополнений. Конечно, можно добавить иконки любого размера, и Firefox постарается найти лучшую из них для показа в разных компонентах.

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

Ключи в объекте icons определяют размеры иконок в пикселях, значения — относительный путь к файлам с изображениями. Этот пример содержит иконку размером 48х48 пикселей и увеличенную версию для мониторов высокого разрешения.

"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

В качестве иконки можно использовать файл SVG. Тогда браузер будет масштабировать иконку так, чтобы она подходила к компоненту, в котором она используется. Но есть два предостережения:

  1. В файле изображения должен быть определён viewBox. Например:
    <svg viewBox="0 0 48 48" ...
    
  2. Даже в том случае, если используется всего один файл, нужно определить его для разных размеров иконки в манифесте. Например:
    "icons": {
      "48": "icon.svg",
      "96": "icon.svg"
    }
    

Примечание: Если вы используете программу Inkscape или подобную ей для создания SVG, сохраняйте изображение как «Простой SVG». Иначе Firefox может запутаться во множестве специальных пространств имён и не отобразить картинку.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Web Icons — Плагин WordPress

  • Детали
  • отзывов
  • Монтаж
  • Развитие

Опора

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

Доступная библиотека иконок
  • Font Awesome (fontawesome) : Font Awesome предоставляет вам масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать с помощью CSS.
  • Fontello : Эта библиотека позволяет комбинировать веб-шрифты значков для вашего собственного веб-проекта.
  • IcoMoon : IcoMoon стремится создать и предоставить лучший инструмент для иконографии и управления иконками для перфекционистов. Библиотека иконок IcoMoon содержит только самые лучшие наборы иконок.
  • Open Iconic
    : Open Iconic — это брат Iconic с открытым исходным кодом. Это очень разборчивая коллекция из 223 иконок небольшого размера, готовая к использованию с Bootstrap.
  • WordPress Dashicons : Dashicons является официальным шрифтом значков администратора WordPress с версии 3. 8.
  • Google Material Fonts : значки материалов красиво оформлены, восхитительны и просты в использовании в Интернете.
  • Иконки социальных сетей JustVector : Эти 150 монохромных иконок социальных сетей разработаны с учетом простоты. Представленные в векторном формате, они полностью редактируются и плавно масштабируются до любого размера.
  • Платежные шрифты : PaymentFont изначально был создан для плагина способов оплаты WooCommerce для WordPress и WooCommerce.

Рекомендуемые плагины

Ниже приведены другие плагины, рекомендованные автором:

  • Лучший плагин для галереи — Easy Media Gallery — это плагин для WordPress, предназначенный для отображения различных медиа-поддержек, включая сетчатую галерею, галереи, фотоальбом, несколько фотоальбомов, портфолио. , фотогалерея или галерея изображений.
  • Лучший плагин для слайдера изображений – Easy Image Slider Widget – Очень простое отображение вашего изображения в виде слайдера в области виджета/боковой панели.
    Позволяет настроить его так, чтобы он выглядел именно так, как вы хотите.
  • Лучший плагин контактной формы — Лучший плагин контактной формы для создания потрясающей контактной формы за считанные минуты.
  • Плагин Instagram — Плагин Instagram — очень легко отображайте свои медиафайлы Instagram в виде галереи каменной кладки на сайте WordPress.
  • Лучший плагин для всплывающих окон — Лучший плагин для уведомлений и форм подписки, позволяющий отображать всплывающие окна уведомлений, объявления и форму подписки с легкостью, модностью и элегантностью.
  • Best Image Carousel — Плагин WordPress с сенсорным экраном, который позволяет создавать красивую адаптивную карусель изображений.
  • Лучший лайтбокс галереи — лайтбокс галереи — отображает все изображения галереи в слайдере лайтбокса всего за несколько секунд.
  • На сервере
  • На сервере
  • На интерфейсе
  • На интерфейсе с пользовательским текстом
Для автоматической установки:

Самый простой способ установки — нажать «Плагины», затем «Добавить». ‘ и введите ‘значок’ в поле поиска.

Для ручной установки 1:
  1. Войдите на свой сайт и перейдите в раздел «Плагины» панели администратора.
  2. Нажмите кнопку «Добавить новый».
  3. В разделе «Установить подключаемые модули» щелкните ссылку «Загрузить».
  4. Выберите zip-файл плагина (icon.x.x.x.zip) на своем компьютере, затем нажмите кнопку «Установить сейчас».
  5. Вы должны увидеть сообщение об успешной установке плагина.
  6. Щелкните ссылку Активировать плагин.
Для ручной установки 2:
  1. У вас должен быть доступ к серверу, на котором установлен WordPress. Если нет, обратитесь к системному администратору.
  2. Скопируйте zip-файл плагина (icon.zip) на свой сервер и разархивируйте его где-нибудь в файловой системе.
  3. Скопируйте папку «icon» в каталог /wp-content/plugins вашей установки WordPress.
  4. Войдите на свой сайт и перейдите в раздел «Плагины» панели администратора.
  5. Найдите «значок» и нажмите «Активировать».

Как использовать плагин Icon?

Нет сложных инструкций по использованию плагина Icon, просто отредактируйте свой пост/страницу и найдите кнопку генератора значков в левом верхнем углу редактора сообщений.

Как я могу получить поддержку?

  • Мы не можем предоставить ничего, кроме поддержки плагина Icon на уровне сообщества.

Как я могу сказать спасибо?

  • Просто порекомендуйте наш плагин своим друзьям! или
  • Если вам действительно нравится плагин Icon, любое пожертвование будет признательно! Это помогает продолжить разработку и поддержку плагина.
    А если серьезно, я просто хочу пить кофе бесплатно, так что помогите разработчику. Вы можете использовать эту ссылку Donate to Icon Plugin.

Нет отзывов об этом плагине.

«Веб-значки» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

Авторы

  • ГозиЛаб
1.0.0.9
  • Исправлено: проблема выбора значков в режиме RTL
  • Обновление
  • : совместимость с WordPress 5.9
1.0.0.7
  • Исправлено: Устаревший хук media_buttons_context
  • Обновление
  • : совместимость с WordPress 5.7
1.0.0.5
  • Исправлено: проблема с языком RTL
1.0.0.3
  • Исправлено: кнопка генератора шорткодов исчезла в редакторе Гутенберга (версия WP 5+)
1.0.0.1
  • Обновление: совместимость с WordPress 4.8
  • Новые шрифты от Google Material Fonts
  • Новая страница справки
  • Теперь вы можете установить средний или нормальный размер значка
  • Исправлено положение иконки Dashicons
  • Возможность редактировать текущую иконку одним щелчком мыши. См. на странице справки.
1.0.0.0
  • Это стартовая версия. Пока нет изменений.

Мета

  • Версия: 1.0.0.9
  • Последнее обновление: 3 месяца назад
  • Активные установки: 1000+
  • Версия WordPress: 3.3 или выше
  • Протестировано до: 6.2.2
  • Языки:
  • Теги:

    FontAwesomefonticonicon fonticons

  • Расширенный вид

Служба поддержки

Проблемы, решенные за последние два месяца:

1 из 1

Посмотреть форум поддержки

Пожертвовать

Хотите поддержать продвижение этого плагина?

Пожертвовать этому плагину

иконок — набор инструментов | UAB

Что такое наборы иконок?

Наборы значков — это наборы инструментов для шрифтов и значков, основанные на CSS. Наборы значков можно использовать на веб-сайтах, вставив небольшой фрагмент кода в то место, где вы хотите, чтобы значок отображался либо рядом с текстом, либо отдельно. Некоторые библиотеки иконочных шрифтов также доступны для печати.

 

С какими наборами значков я должен работать как пользователь распределенного кампуса?

Font Awesome Pro

Font Awesome Pro — это наш новый платный набор иконок с огромным набором иконок для работы.

Этот новый инструмент имеет ряд преимуществ, в том числе:

  • Множество значков с разной толщиной линий
  • Специализированные подгруппы по таким темам, как Осведомленность о Covid-19
  • Общий репозиторий для распределенных пользователей кампуса, позволяющий поддерживать единообразный брендинг для наших веб-иконок

IcoMoon

UAB также использует бесплатную версию набора иконок под названием IcoMoon, который имеет ограниченное количество иконок и только один вес линии. IcoMoon является частью всех установок Joomla по умолчанию и будет по-прежнему доступен, поэтому нет необходимости изменять какие-либо ссылки на него, если вы в настоящее время используете его в своем контенте.

 

Как я могу использовать любой набор значков на своем веб-сайте UAB в качестве пользователя распределенного кампуса?

Чтобы использовать любые значки в вашем контенте из любого из наших доступных наборов значков, вам необходимо прикрепить класс CSS к элементу.

Например, вы можете создать кнопку «Связаться с нами» со значком Font Awesome Pro, используя приведенный ниже код:

Свяжитесь с нами

  Свяжитесь с нами  

Вы также можете создать кнопку «Связаться с нами» со значком IcoMoon, используя приведенный ниже код:

Свяжитесь с нами

  Свяжитесь с нами  

*Замените любую ссылку на «#» URL-адресом, по которому вы хотите, чтобы ваша кнопка была ссылкой.

 

Где найти список имен классов для двух вариантов набора значков?

Имена классов Font Awesome Pro

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

Имена классов IcoMoon

  • Нажмите здесь, чтобы просмотреть имена классов IcoMoon

    .icon-joomla

    .icon-chevron-up

    .icon-uparrow

    .icon-arrow-up

    .icon-chevron-right

    .icon-rightarrow

    .icon-arrow-right

    .icon-chevron-down

    .icon-downarrow

    .icon-arrow-down

    .icon-chevron-left 90 013

    .icon-стрелка влево

    .icon-arrow-left

    .icon-arrow-first

    .icon-rrow-last

    .icon-rrow-up-2

    .icon-arrow-right-2

    .icon-arrow-arrow -вниз-2

    .значок-стрелка-влево-2

    .значок-стрелка-вверх-3

    .значок-стрелка-вправо-3

    .icon-стрелка-вниз-3

    .icon-стрелка-влево-3

    .icon-menu-2

    .icon-стрелка-вверх-4

    .icon-стрелка-вправо-4

    . icon-arrow-down-4

    .icon-arrow-left-4

    .icon-share

    .icon-redo

    .icon-undo

    .icon-forward-2

    . ic на-назад- 2

    .icon-reply

    .icon-unblock

    .icon-refresh

    .icon-redo-2

    .icon-undo-2

    .icon-move

    .icon-expand

    .icon-contract

    .icon-expand-2

    .icon-contract-2

    .icon-play

    .icon-pause

    .icon-stop

    .icon- предыдущий

    .icon-backward

    .icon-next

    .icon-forward

    .icon-first

    .icon-last

    .icon-play-circle

    .icon-pause-circle

    . icon-stop-circle

    .icon-backward-circle

    .icon-forward-circle

    .icon-loop

    .icon-shuffle

    .icon-search

    .icon-zoom-in

    .icon-zoom-out

    .icon-apply

    9001 2 .icon-edit

    .icon- карандаш

    .icon-pencil-2

    .icon-brush

    .icon-save-new

    .icon-plus-2

    .icon-ban-circle

    .icon-minus -знак

    . icon-minus-2

    .icon-delete

    .icon-remove

    .icon-cancel-2

    . icon-publish

    .icon-save

    .icon-ok

    .icon-checkmark

    .icon-new

    .icon-plus

    .icon-plus-circle

    900 12 .icon-минус

    .icon-не -ok

    .icon-minus-circle

    .icon-unpublish

    .icon-cancel

    .icon-cancel-circle

    .icon-checkmark-2

    .icon -галочка-круг

    .icon -info

    .icon-info-2

    .icon-info-circle

    .icon-вопрос

    .icon-question-sign

    .icon-help

    .icon-question-2

    .icon-question-circle

    .icon-notification

    .icon-notification-2

    .icon-уведомление- круг

    .icon-ожидание

    .icon-warning

    .icon-warning-2

    .icon-warning-circle

    .icon-checkbox-unchecked

    .icon- регистрация

    .icon-checkbox

    .icon-checkbox-checked

    .icon-checkbox-partial

    .icon-square

    .icon-radio-unchecked

    .icon-radio-checked

    .icon-circle

    . icon-signup

    .icon-grid

    .icon-grid-view

    .icon-grid-2

    .icon-grid-view-2

    .icon-menu

    .icon-list

    .icon-list-view

    .icon-list-2

    .icon-меню -3

    .icon-folder-open

    .icon-folder

    .icon-folder-close

    .icon-folder-2

    .icon-folder-plus

    .icon-folder-minus

    .icon-folder-3

    .icon-folder-plus-2

    .icon-folder-remove

    .icon-файл

    .icon-file-2

    .icon-file-add

    .icon-file-plus

    .icon-file-remove

    .icon-file-minus

    .icon-file-check

    900 12 .значок -file-remove

    .icon-save-copy

    .icon-copy

    .icon-stack

    .icon-tree

    .icon-tree-2

    .icon-paragraph-left

    .icon-paragraph-center

    .icon-paragraph-right

    .icon-paragraph-justify

    .icon-screen

    .icon-tablet

    .icon-мобильный

    .icon-box-add

    .icon-box-remove

    . icon-download

    .icon-upload

    .icon-home

    .icon-home-2 90 013

    .icon-out-2

    .icon-new-tab

    .icon-out-3

    .icon-new-tab-2

    .icon-ссылка

    .icon-picture

    .icon-image

    .icon-pictures

    .icon-images

    .icon-palette

    .icon-color-palette

    .icon-камера

    .icon-камера -2

    .icon-video

    .icon-play-2

    .icon-video-2

    .icon-youtube

    .icon-music

    .icon-user

    .icon-пользователи

    .icon-vcard

    .icon-address

    .icon-share-alt

    .icon-out

    .icon-enter

    .icon-exit

    .icon-comment

    .icon-comments

    .icon-comments-2

    .icon-quote

    9 0012 .icon-quotes-left

    .icon -quote-2

    .icon-quotes-right

    .icon-quote-3

    .icon-bubble-quote

    .icon-phone

    .icon-phone-2

    . значок-конверт

    .icon-mail

    .icon-envelope-opened

    . icon-mail-2

    .icon-unarchive

    .icon-drawer

    .icon-archive

    .icon-drawer-2

    .icon-porter

    .icon-tag

    .icon-tag-2

    .icon-теги

    .icon -tags-2

    .icon-options

    .icon-cog

    .icon-cogs

    .icon-screwdriver

    .icon-tools

    .icon-wrench

    .icon-эквалайзер

    .icon -приборная панель

    .icon-switch

    .icon-filter

    .icon-purge

    .icon-trash

    .icon-checkedout

    .icon-lock

    .icon-locked

    .icon-unlock

    .icon-key

    .icon -support

    .icon-база данных

    . icon-scissors

    .icon-health

    .icon-wand

    .icon-eye-open

    .icon-eye

    .icon-eye-close

    .icon- с закрытыми глазами

    .icon- глаз-2

    .icon-часы

    .icon-компас

    .icon-broadcast

    .icon-connection

    .icon-wifi

    .icon-book

    .icon-lightning

    .