Иконки меню GetCourse

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

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

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

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

Первое, что нужно сделать — создать так называемый 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 можно здесь.

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

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