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

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

  1. Екатерина сказал:

    Добрый день! Большое спасибо за туториал, все получилось, как описано. Единственное, почему-то пропала иконка чата. В коде не указан код на иконку Font Awsome, может быть из-за этого ошибка? Подскажите пожалуйста, как это можно исправить, спасибо!

    • Тимур сказал:

      Здравствуйте, Екатерина.
      Подскажите, пожалуйста, иконка чата которого? Которая в правом нижнем углу? По идее она не должна «слетать». Иногда она не подгружается, помогает обновление страницы. Если же она всё-таки пропала, то добавьте в код:

      
      .fa-comments:before {
          content: "\f086";
      }
      

      И в том месте, где мы задавали шрифт для иконок добавьте .fa-comments:before, чтобы получилось вот так:

      
      .gc-account-user-menu .menu-item a:before,
      .fa-comments:before {
      
  2. Татьяна сказал:

    Почти месяц пытаюсь найти информацию, как поменять иконки в ГК. Нашла!)) Но из всего вышенаписанного у меня получилось только их скрыть… У меня Font Awesome не желает работать(( На каком ресурсе еще можно иконочный шрифт скачать?

    • Тимур сказал:

      О как. Не сталкивался с тем, что Font Awesome не хочет работать. Проверьте в настройках, чтобы скрипт был подключен:

      
      <script src="https://kit.fontawesome.com/tut-vash-identifikator.js" crossorigin="anonymous"></script>
      

      Ещё иконочный шрифт можно подключить, например, отсюда.

  3. Татьяна сказал:

    ААААА!!!!!)))))) Спасибо Вам огромнейшее!!!)))) Я немного поколдовала, извилинами пошевелила и у меня все получилось!))))
    Тимур, у меня сам сайт вот так открывается http://joxi.ru/EA4GBQXCvYbj32

    • Тимур сказал:

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

    • Тимур сказал:

      Здравствуйте, Елена.

      Подписать можно с помощью стилей, но будет довольно мелко. Для примера приведу CSS одного пункта — «Сайт»:

      
      .gc-account-user-menu .menu-item-cms { 
          position: relative
      }
      .gc-account-user-menu .menu-item-cms a:after { 
          content: "Сайт"; 
          display: block;
          position: absolute;
          font-size: 10px;
          color: #fff;
          text-align: center;
          width: 50px;
          bottom: 2px;
          left: auto;
          right: auto;
      }
      
  4. Андрей сказал:

    Иконка «уведомления» не отображается — не видно строк описывающих её код. И иконка «чатиум» тоже невидна.

  5. Андрей сказал:

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

  6. Янина сказал:

    У меня скрипт не сработал.
    Во-первых, этот код никакого видимого эффекта на меню не оказал:
    /*Скрываем стандартные иконки меню*/
    .gc-account-user-menu .menu-item img {
    display: none
    }
    Во-вторых, вместо значков иконочного шрифта просто квадратики, хотя я всё подключила по инструкции.

  7. Олег сказал:

    Возникла проблема, через некоторое время как будто отключается скрипт и красивые иконки превращаются в квадратики

    • Тимур сказал:

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

  8. Алекс сказал:

    Тимур, спасибо за статью.
    можешь скинуть код с примером загруженной png иконки?

    • Тимур сказал:

      Картинками пока не делал, т. к. с ними неудобно в плане необходимости делать по две версии. Если дойдут руки, добавлю 🙂

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

Ваш адрес email не будет опубликован.