Кому как, а мне дизайн главного меню 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 можно здесь.
Добрый день! Большое спасибо за туториал, все получилось, как описано. Единственное, почему-то пропала иконка чата. В коде не указан код на иконку Font Awsome, может быть из-за этого ошибка? Подскажите пожалуйста, как это можно исправить, спасибо!
Здравствуйте, Екатерина.
Подскажите, пожалуйста, иконка чата которого? Которая в правом нижнем углу? По идее она не должна «слетать». Иногда она не подгружается, помогает обновление страницы. Если же она всё-таки пропала, то добавьте в код:
И в том месте, где мы задавали шрифт для иконок добавьте .fa-comments:before, чтобы получилось вот так:
Почти месяц пытаюсь найти информацию, как поменять иконки в ГК. Нашла!)) Но из всего вышенаписанного у меня получилось только их скрыть… У меня Font Awesome не желает работать(( На каком ресурсе еще можно иконочный шрифт скачать?
О как. Не сталкивался с тем, что Font Awesome не хочет работать. Проверьте в настройках, чтобы скрипт был подключен:
Ещё иконочный шрифт можно подключить, например, отсюда.
ААААА!!!!!)))))) Спасибо Вам огромнейшее!!!)))) Я немного поколдовала, извилинами пошевелила и у меня все получилось!))))
Тимур, у меня сам сайт вот так открывается http://joxi.ru/EA4GBQXCvYbj32
Такое иногда случается. Возможно, у них ошибка какая-то и стили не прогрузились. Помогает обновление страницы или зайти попозже)
Добрый день. Как подписать иконки на боковой панели
Здравствуйте, Елена.
Подписать можно с помощью стилей, но будет довольно мелко. Для примера приведу CSS одного пункта — «Сайт»:
Иконка «уведомления» не отображается — не видно строк описывающих её код. И иконка «чатиум» тоже невидна.
С иконками разобрался. Другой вопрос: я перекрасил меню и сменил иконки, но при переключении на некоторые пункты меню, меню меняет свой вид на стандартный геткурса. Это можно как то лечить?
В частности такое наблюдается при входе в «профиль», «смена пароля», «поиск» (в тренингах), и все пункты в меню чатиум.
У меня скрипт не сработал.
Во-первых, этот код никакого видимого эффекта на меню не оказал:
/*Скрываем стандартные иконки меню*/
.gc-account-user-menu .menu-item img {
display: none
}
Во-вторых, вместо значков иконочного шрифта просто квадратики, хотя я всё подключила по инструкции.
Возникла проблема, через некоторое время как будто отключается скрипт и красивые иконки превращаются в квадратики
Да, Олег, такое случается время от времени, особенно когда находишься в настройках аккаунта. Я тестировал, заходя как обычные пользователь, проблем не было. Вероятно, проблема с подгрузкой скрипта иконочного шрифта. Как вариант, можно использовать собственный иконочный шрифт, либо подключить другой.
Тимур, спасибо за статью.
можешь скинуть код с примером загруженной png иконки?
Картинками пока не делал, т. к. с ними неудобно в плане необходимости делать по две версии. Если дойдут руки, добавлю 🙂
Всё получилось замечательно, но пропала иконка чатиума(( Подскажите, как ее вернуть?