Список иконка: Список – Бесплатные иконки: файлы и папки

Как работать с модулем «Список из иконок»

С помощью модуля «Список из иконок» можно создать список услуг, качеств, видов товара или услуги. Для примера настройки этого модуля мы создадим такой список возможностей оплаты товара:

Как добавить модуль на страницу

  1. 1.

    Войдите в режим редактирования сайта.

  2. 2.

    Выберите строку, в которую хотите добавить модуль.

  3. 3.

    Нажмите на серый плюс.

  4. 4.

    Выберите нужный модуль:

Готово, теперь можете переходить к настройкам внешнего вида текста.

Настройки каждого модуля находятся в трёх вкладках: «Контент», «Дизайн», «Дополнительно».

Контент

Во вкладке «Контент» нажмите на 

знак плюса:

Вы перейдёте в режим настройки иконки. Здесь тоже есть три вкладки для настройки внешнего вида иконки «Контент», «Дизайн» и «Дополнительно».

Обратите внимание! Если вы хотите указать одинаковые настройки текста и иконок (например, цвет, шрифт, размер), удобнее это делать в общих настройках модуля во вкладке «Дизайн».

Во вкладке «Контент» в блоке «Контент» настройте текст и картинку для элемента списка. Чтобы выбрать иконку из предложенного списка, в параметре Использовать иконку переведите переключатель в положение ДА и выберите иконку:

Если вам не подходят предложенные иконки, можно загрузить своё изображение. Для этого в параметре «Использовать иконку» переведите переключатель в положение НЕТ и нажмите на знак плюса. Загрузите изображение:

В блоке «Подсказка» можно настроить всплывающую подсказку. Для этого в параметре Использовать всплывающую подсказку

переведите переключатель в положение ДА и введите текст, который должен отображаться в подсказке:

Ниже в блоке «Фон» можно установить однотонный или градиентный фон для элемента списка.

Во вкладке «Дизайн» в блоке «Иконка» настраивается:

  • закругление краёв иконки,
  • рамка,
  • тень.

В блоке «Изображение» настраивается:

  • цвет фона иконки,
  • отступ слева от изображения,
  • размер иконки,
  • закругление фона иконки,
  • рамка.

В блоке «Подсказка» настраивается:

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

В блоке «Текст» настраивается шрифт, цвет, размер, межбуквенный интервал текста рядом с иконкой.

Во вкладке «Дополнительно» настраивается CSS и HTML-код для элемента.

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

Добавьте и настройте остальные элементы списка.

Обратите внимание! Если вы указали индивидуальные настройки для каждого текста и иконки, в этой вкладке в блоках «Текст», «Иконка», «Изображение», «Подсказка» ничего устанавливать не нужно.

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

В блоке «Иконка» настраивается закругление краёв фона, рамка, тень всех иконок.

В блоке «Изображение» настраивается цвет фона, отступ слева, размер, закругление фона, рамка для всех изображений.

В блоке «Список элементов» настраивается:

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

С помощью блоков «Размеры» и ​​«Отступы» настройте размер всего модуля и его положение на странице.

В блоке «Фильтр» можно изменить контрастность, насыщенность, яркость, прозрачность изображений.

В блоке «Анимация» настройте параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Дополнительно

Эта вкладка предназначена для опытных пользователей, которые умеют работать с CSS и HTML. Также здесь можно настроить видимость элемента на разных устройствах, например, модуль будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайт на разных устройствах, описано в статье.

Помогла ли вам статья?

Да

0 раз уже помогла

Бесплатные иконки для вашего продукта (Большой список)

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

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

Бесплатные иконки

Эти 5 сайтов являются золотым рудником для дизайнеров, которые хотят сохранить для себя больше времени.

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

The Noun Project – Почти миллион бесплатных иконок созданных мировым дизайнерским сообществом.

Flat Icon – Самая большая база данных бесплатных значков.

Find Icons – Найдите бесплатные значки по ключевым запросам или используйте кнопку “surprise me”, чтобы получить что-то совершенно случайное — к тому же совершенно бесплатно.

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

Icon Gallery – В настоящее время, сервис насчитывает более 404 тыс. бесплатных иконок и значков. Дизайнеры разных профилей могут искать и использовать лицензионные значки для использования в коммерческих целях.


Бесплатные пакеты значков для web-дизайна

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

Flat Graphic Design Icons – 36 бесплатных иконок, идеально подходящих для построения инфографики, пользовательских интерфейсов и панелей инструментов.

Metro UI Icon Set – 725 бесплатных значков (512×512) для веб-браузеров, операционных систем и популярных веб-сайтов.

Flat Icons (PSD) – Красочные бесплатные иконки от дизайнера Пьера Бородина.

48 Flat Designer Icons – бесплатный набор значков — 48 офисных, туристических и социальных иконок. (Вам нужно будет ввести свой адрес электронной почты, чтобы произвести загрузку).

168 Custom Interface Icons – В пакет входят значки в 3 стилях (выделенные, заполненные и цветные).

Plex – 119 бесплатных значков, созданных для соответствия с продуктами Google.

Free Flat Style Icon Pack – Идеально подходит для работы с векторными стилями.

Varient Flat Custom CS Icons – Идеальный пакет значков от Тома Ньютона.

Hex Icons Pack – 170 бесплатных значков, плюс 45 игровых иконок.

Climacons – 75 иконок климатической тематики от Адама Уиткрофта.

Free Line Icon Set – 38 значков, некоторые из них – значки самых популярных графических редакторов.

Free Flat Icons – Простые, элегантные иконки от дизайнера Яна Дворжака.

Publicons – Коллекция тонко-настроенных значков для издательской и платформенной графики от Tumblr до Drupal.

Product Icons – Содержит значки для Dribbble, Pinterest и других приложений.

Elegant Mobile App Icons – Полностью редактируемые значки для мобильных приложений.


Бесплатные иконки для социальных сетей

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

Social Icons from Flat Icons – Бесплатный пакет плоских значков для социальных сетей. Значки являются лицензированными, могут применяться для коммерческого использования.

Retina-ready Circle Flat Icons – 24 высококачественных бесплатных сетчатых значков для социальной сети.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *