Иконки для меню сайта: Иконки меню — 20,804 бесплатных иконок

Меняем стандартные иконки в главном меню GetCourse

GetCourse

Кому как, а мне дизайн главного меню GetCourse не нравился никогда. И вот дошли руки поковыряться с ним. В первую очередь — замена иконок.

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

Можете использовать любой иконочный шрифт, я выбрал Font Awesome.

UPD. Добавил еще один пост с наборами иконочных шрифтов, которые мы использовали при оформлении школ. Бонусом там подробный код для подключения и добавления подписей под иконками.

Первое, что нужно сделать — создать так называемый Kit для использования в ваших проектах. Зарегистрируйтесь на fontawesome.com. На главной странице нажмите кнопку «Start for free», введите свою почту и следуйте инструкциям.

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

Нажмите кнопку «Copy Kit Code» и переходите в GetCourse. Нам нужен раздел «Профиль — Настройки аккаунта». В настройках перейдите во вкладку «Настройки» и пролистайте до поля «Счетчики и прочие скрипты». В это поле вставьте скопированный код набора иконок. Сохранитесь.

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

<style>
/*Скрываем стандартные иконки меню*/
.gc-account-user-menu .menu-item img {
    display: none
}
/*Задаём для ссылок меню иконочный шрифт Font Awesome*/
.gc-account-user-menu .menu-item a:before {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    line-height: 1;
    color: #fff; /*Задаём цвет иконок*/
    font-size: 24px; /*Задаём размер иконок*/
}
.gc-account-user-menu .
  menu-item-profile a:before {
    content: "\f007"; /*Код иконки профиля*/
}
.gc-account-user-menu .menu-item-cms a:before {
    content: "\f015"; /*Код иконки Сайт*/
}
.gc-account-user-menu .menu-item-teach a:before {
    content: "\f51c"; /*Код иконки Обучение*/
}
.gc-account-user-menu .menu-item-user a:before {
    content: "\f0c0"; /*Код иконки Пользователи*/
}
.gc-account-user-menu .menu-item-tasks a:before {
    content: "\f14a"; /*Код иконки Задачи*/
}
.gc-account-user-menu .menu-item-notifications a:before {
    content: "\f0e0"; /*Код иконки Сообщения*/
}
.gc-account-user-menu .menu-item-sales a:before {
    content: "\f158"; /*Код иконки Продажи*/
}
.gc-account-user-menu .menu-item-chatium img {
    max-width: 24px; /*Размер иконки Chatium*/
}
.gc-account-user-menu .menu-item.active a:before,
.gc-account-user-menu .menu-item.selected a:before {
    color: #333; /*Задаём цвет иконок в активном состоянии и при нажатии*/
}
</style>

Сохраните изменения.

Коды иконок можно оставить такие же, можно использовать другие. Посмотреть коды для иконок Font Awesome можно здесь.

Эта запись была размещена в GetCourse с меткой css,иконки.

Тимур

В нашей команде отвечаю за дизайн и техническую часть проектов. Статьи — моё хобби. Всегда рад, если мой материал оказался полезен для кого-то.

добавляем изображения в пункты меню сайта. Создание меню с иконками с помощью плагина Menu Icons

Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте.

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

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

О том  как правильно создавать и настраивать меню в WordPress Вы можете почитать в одном из прошлых уроков.

Создание меню с иконками в WordPress

Для создания меню с иконками мы будем использовать плагин Menu Icons. И так, начнем!

1. Устанавливаем и активируем плагин Menu Icons. О том как установить плагины в WordPress читайте в специальном уроке.

2. Переходим в Внешний вид -> Меню.

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

4. В настройках пункта меню нажимаем Select.

5. В открывшемся окне выбираем иконку, и указываем параметры отображения в настройках с правой стороны.

Свойство Position отвечает за позицию иконки в меню. Если Вы выберите Before — иконка будет отображаться перед названием пункта меню, а если After — после названия.

Vertical align отвечает за выравнивание иконки по вертикали, значение Middle (выравнивание средней точки иконки по базовой линии) будет по умолчанию. Его менять не будем.

Font Size — настройка размера иконки. Чем больше значение — тем больше размер иконки.

После выбора иконки нажимаем в нижнем правом углу кнопку Select, а после кнопку «Сохранить меню».

Вот что получилось у нас в результате:

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

Как добавить свою картинку в меню

Для того чтобы загрузить и установить свою собственную картинку нужно сделать следующее:

1. В открывшемся окне, которое появляется после нажатия на Select (в пункте меню) нажимаем Image. После этого загружаем изображение на вкладке «Загрузить файлы» или выбираем из уже загруженных ранее файлов на вкладке «Библиотека файлов».

2. Сохраняем изменения нажав кнопку «Сохранить меню».

Как видите, ничего сложного в добавлении иконок в пункты меню WordPress нету. Плагин Menu Icons не требует настроек, а добавление иконок в меню не требует особых знаний.

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

Выберите правильный значок меню для навигации? | by Vikalp Kaushik

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

Для всех этих значков нет официального названия, кроме значков меню.

Существуют разные производители иконок, такие как Font Awesome и Material Design, которые используют разные имена для всех своих иконок, что затрудняет определение названий этих иконок.

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

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

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

«Кебаб» (три вертикальные точки), появившийся в языке Google Material Design, предназначен для открытия встроенного меню меньшего размера с помощью кнопки или другого элемента управления.

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

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

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

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

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

Это популярное турецкое блюдо до сих пор является наиболее широко используемым символом фильтра. Было бы предпочтительнее использовать его совместно с опциями «сортировки по», но в современных приложениях очень часто встречается в сочетании с глобальными фильтрами.

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

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

Иконки меню от Alex Muench

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