Иконки меню: Иконки меню — 19,486 бесплатных иконок — Независимое театральное объединение "Зрительские симпатии"

Содержание

Меняем стандартные иконки в главном меню 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,иконки.

Тимур

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

Как добавить иконки в меню WordPress – Some Code Here

Главная » WordPress » Как добавить иконки в меню WordPress

WordPress

Автор DeniDenx На чтение 3 мин Просмотров 2.3к. Опубликовано

01/03/2021 Обновлено 05/03/2021

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

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

Содержание

Добавляем иконки в меню WordPress через плагин
Как добавить иконку рубрики в меню
Украшаем иконки меню WordPress

Добавляем иконки в меню WordPress через плагин

Безусловно самым простым способом является установка иконок с помощью плагина. Первым делом нам понадобится установить плагин Menu Icons by ThemeIsle, он достаточно прост и имеет поддержку множества библиотек иконок, таких как FontAwesome. Если вы не знаете как устанавливать плагины, обратитесь к статье — Как установить плагин WordPress.

Далее мы переходим к настройкам нашего меню. Внешний вид → Меню

Если у вас на сайте несколько разных меню, вы можете выбрать именно нужное вам. Затем выберите нужный элемент в меню, это может быть как рубрика, так и запись. Абсолютно любому элементу в меню можно задать свою иконку.

Также слева доступно меню, в котором вы можете выбрать библиотеку иконок, которую вы хотите использовать. Можно выбрать все, а можно только одну, как я. С помощью Image и SVG вы можете загружать свои изображения.

Каждая библиотека содержит свой CSS файл с настройками иконок. Выбрав все, вы автоматически добавляете их загрузку в head вашей страницы, даже если вы их не используете. Это может сказаться на скорости вашего сайта.
Рекомендую выбрать одну или две библиотеки и пользоваться ими. Мне хватает одной библиотеки — Font Awesome.

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

Открываем нужный элемент в вашем меню, у меня это рубрики и если вы всё сделали правильно, то должна появиться кнопка выбора иконки, нажимаем её.

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

Фильтр групп.
Поиск.
Выбор иконки.

После выбора нужной вам иконки, справа откроется возможность её настроить.

Вы можете скрыть текст ссылки, указать позицию (до/после ссылки), выравнивание и конечно же сам размер иконки, экспериментируйте и выбирайте то, что вам больше всего по душе.

Определитесь с настройками и не забудьте нажать на кнопку «Сохранить меню». Проверяем на своем сайте и наслаждаемся!

Украшаем иконки меню WordPress

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

Для этого дела нам нужна панель разработчика (ctrl + shift + i), находим нашу иконку в коде и смотрим какой у нее класс. Далее, мы с легкостью можем задать цвет всему классу с помощью дополнительных стилей (Внешний вид → Настроить → Дополнительные стили) .

Задаем цвет иконки с помощью свойства color. Сохраняем и проверяем как всё отображается на нашем сайте.

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

wordpress Ииконки в меню Иконки WordPress Иконки в меню WordPress плагины wordpress

Иконки Меню – Скачать бесплатно в PNG и SVG

Иконки

Иллюстрации

Фото

Музыка

Все стили

Анимированные и статичные

Анимированный и статичный

Анимированный

Статический

Все дизайнеры

Иконки8

Независимые

Перекрасить

Меню

Missing an icon? Мы создадим ее

Расскажите нам о нужной вам иконке, и мы бесплатно нарисуем ее в одном из существующих стилей Icons8.