GetCourse

Наборы иконок для меню GetCourse

Наборы иконок для меню GetCourse

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

На данный момент у нас два таких набора иконок: Fluent System Regular и Windows 10 (он же Line Awesome). Иконки от Icons8.com.

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

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

Инструкция по установке в конце статьи.

Набор иконок Fluent Sysyem Regular

Набор иконок для GetCourse Fluent System Regular

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

Пример внешнего вида меню с установленным набором.

Набор иконок для GetCourse Fluent System Regular

Скачать набор иконок

Набор иконок в стиле Windows 10 (Line Awesome)

Набор иконок для GetCourse Windows 10 style

Пример внешнего вида меню с установленным набором.

Набор иконок для GetCourse Windows 10 style

Скачать набор иконок

Как установить иконки в GetCourse

  1. Скачайте архив с иконочным шрифтом, распакуйте его.
  2. Перейдите в файловое хранилище GetCourse и загрузите все файлы шрифта из папки font (.ttf, .eot, .svg, .woff, .woff2).
  3. В новой вкладке откройте настройки аккаунта, вкладка «Настройки». Вам нужно поле для вставки дополнительного кода «Счётчики и прочие скрипты для BODY».

Подключаем иконочный шрифт

Вставьте следующий код:

<style>
@font-face {
  font-family: 'fontello';
  src: url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/301/h/3f6f6074df1b373c9dcce90cc7f2f833.eot');
  src: url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/301/h/3f6f6074df1b373c9dcce90cc7f2f833.eot#iefix') format('embedded-opentype'),
       url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/441/h/1aeceaf4fc8f75c85de7b2fe6251d6a4.woff2') format('woff2'),
       url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/88/h/77730a3e3037ee808e7b1fa46060a5b2.woff') format('woff'),
       url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/294/h/4d32a670eed99f924e4a5eb1d905fe0b.ttf') format('truetype'),
       url('https://yourdomain.ru/fileservice/file/download/a/183796/sc/156/h/78bc3a6a01ef858391c9bef06677a362.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
</style>

Теперь вам нужно заменить ссылки на файлы шрифта из примера на свои. Вернитесь в файловое хранилище и по одной копируйте и вставляйте ссылки на файлы шрифтов. Обратите внимание, что файл .eot подключается в двух строках: в одной для нормальных браузеров, во второй для Internet Explorer. Это на случай, если среди посетителей школы найдутся упорные последователи детища Майкрософт.

Чтобы скопировать ссылку, используйте иконку скачивания файла.

Копирование ссылки на файл иконочного шрифта в GetCourse

Так по одному замените ссылки на файлы в коде выше.

Важный момент. Ссылка у вас скопируется вот такого вида:

https://fs02.getcourse.ru/fileservice/file/download/a/183796/sc/294/h/4d32a670eed99f924e4a5eb1d905fe0b.ttf

Если шрифт после подключения не будет работать в Safari, FireFox или Chrome, попробуйте изменить https://fs02.getcourse.ru/ на свой домен.

Получится так:

https://yourdomain.ru/fileservice/file/download/a/183796/sc/294/h/4d32a670eed99f924e4a5eb1d905fe0b.ttf

Меняем иконки в меню

Теперь откройте файл fontello.css в папке css скачанного шрифта. Скопируйте из него и вставьте в «Счётчики и прочие скрипты для BODY» следующий код:

.icon-angle-down:before { content: '\e800'; } 
.icon-angle-left:before { content: '\e801'; } 
.icon-angle-right:before { content: '\e802'; } 
.icon-angle-up:before { content: '\e803'; }
.icon-arrow-doem:before { content: '\e804'; } 
.icon-arrow-left:before { content: '\e805'; } 
.icon-arrow-right:before { content: '\e806'; } 
.icon-arrow-up:before { content: '\e807'; } 
.icon-audio:before { content: '\e808'; } 
.icon-calendar:before { content: '\e809'; } 
.icon-check:before { content: '\e80a'; } 
.icon-checked:before { content: '\e80b'; } 
.icon-clock:before { content: '\e80c'; } 
.icon-close:before { content: '\e80d'; } 
.icon-double-check:before { content: '\e80e'; } 
.icon-download:before { content: '\e80f'; } 
.icon-education:before { content: '\e810'; } 
.icon-envelope:before { content: '\e811'; } 
.icon-error:before { content: '\e812'; } 
.icon-facebook_messenger:before { content: '\e813'; } 
.icon-facebook:before { content: '\e814'; } 
.icon-file:before { content: '\e815'; }
.icon-home:before { content: '\e816'; } 
.icon-instagram:before { content: '\e817'; } 
.icon-lock:before { content: '\e818'; } /
.icon-menu:before { content: '\e819'; } 
.icon-money:before { content: '\e81a'; } 
.icon-notifications:before { content: '\e81b'; } 
.icon-pdf:before { content: '\e81c'; } 
.icon-play:before { content: '\e81d'; }
.icon-task:before { content: '\e81e'; } 
.icon-telegram:before { content: '\e81f'; } 
.icon-text:before { content: '\e820'; } 
.icon-unlock:before { content: '\e821'; } 
.icon-user:before { content: '\e822'; } 
.icon-users:before { content: '\e823'; } 
.icon-video:before { content: '\e824'; } 
.icon-vkontakte:before { content: '\e825'; } 
.icon-whatsapp:before { content: '\e826'; } 
.icon-youtube:before { content: '\e827'; }

С помощью этого кода мы определяем, к какому классу какая иконка будет относиться, таким образом вы сможете использовать их в произвольных местах в тексте, добавив, например, такой код <i class="icon-telegram"></i>. В результате будет выведена иконка Telegram.

Помните, что весь CSS-код должен находиться между тегами <style></style>

Ну и теперь осталось самое неприятное — добавить стили для самих иконок меню.

В примере ниже будет код, который помимо самих иконок добавит ещё и подписи под ними. Если подписи вам не нужны, уберите все строки, в которых содержится псевдокласс :after.

Чтобы вам было проще визуально, я добавил в код комментарии с пояснениями. Их можете тоже удалить после вставки.

/*Стили главного меню*/
.gc-account-leftbar .notify-count {
    z-index: 10 /*«Поднимаем» счётчик уведомлений, чтобы он не потерялся под иконкой*/
}
.gc-account-user-menu .menu-item-notifications_button_small a img,
.gc-account-user-menu .menu-item-cms img,
.gc-account-user-menu .menu-item-teach img,
.gc-account-user-menu .menu-item-user img,
.gc-account-user-menu .menu-item-tasks img,
.gc-account-user-menu .menu-item-notifications img,
.gc-account-user-menu .menu-item-sales img {
    display: none !important
}
/*Базовые стили иконок*/
.gc-account-user-menu .menu-item a:before {
    font-family: "fontello", sans-serif;
    color: #fff;
    font-size: 24px; /*Задаём размер иконки*/
    line-height: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Базовые стили для подписей под иконками*/
.gc-account-leftbar .gc-account-user-menu li:not(:first-child) a:after,
.gc-account-user-menu .menu-item-notifications_button_small a:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 8px; /*Задаём размер шрифта для текста*/
    z-index: 0;
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
    height: 70px
}
/*
Дальше определяем иконки
Вот тут самое важное. Нужно для каждой иконки прописать нужный код в свойстве «content». Эти коды вы уже добавили выше, когда мы вставляли код всех конок. Чтобы в нужном пункте меню была нужная иконка, нужно скопировать из общего списка код и вставить в нужный пункт
*/
/*Иконка Уведомлений (icon-notifications)*/
.gc-account-user-menu .menu-item-notifications_button_small a:before {
    content: "\e81b";
}
.gc-account-user-menu .menu-item-notifications_button_small a:after {
    content: "Уведомления";
}
/*Иконка Сайт (icon-home)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-cms a:before {
    content: "\e816";
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-cms a:after {
    content: "Сайт";
}
/*Иконка Обучение (icon-education)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-teach a:before {
    content: "\e810";
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-teach a:after {
    content: "Обучение";
}
/*Иконка Пользователи (icon-users)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-user a:before {
    content: "\e823";
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-user a:after {
    content: "Пользователи";
}
/*Иконка Задачи (icon-checked)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-tasks a:before {
    content: "\e80b";
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-tasks a:after {
    content: "Задачи";
}
/*Иконка Сообщения (icon-envelope)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications a:before {
    content: "\e811";
} 
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications a:after {
    content: "Сообщения";
}
/*Иконка Продажи (icon-money)*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-sales a:before {
    content: "\e81a";
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-sales a:after {
    content: "Продажи";
}
/*Уменьшаем размер стандартной иконки Chatium, чтобы он был одинаковым с остальными иконками*/
.gc-account-leftbar .gc-account-user-menu li.menu-item-chatium img {
    max-width: 24px
}
.gc-account-user-menu .menu-item.selected a:before,
.gc-account-user-menu .menu-item.selected a:after {
    color: #464646 /*Задаём цвет иконки при нажатии на пункт меню*/
}
.gc-account-user-menu .menu-item.active a:before,
.gc-account-user-menu .menu-item.active a:after {
    color: #83a1c6 /*Задаём цвет иконки активного пункта меню*/
}
/*Меняем иконки мобильного меню*/
.gc-account-leftbar .toggle-link img {
    display: none
}
.gc-account-leftbar .toggle-link {
    position: relative
}
.gc-account-leftbar .toggle-link:before {
    content: "\e819"; /*Иконка «гамбургера» мобильного меню (icon-menu)*/
    font-family: "fontello", sans-serif;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    left: 15px;
    top: 12px;
    display: flex;
    justify-content: center;
    align-items: center
}
.gc-account-leftbar.expanded .toggle-link:before {
    content: "\e80d" /*Иконка закрытия меню (icon-close)*/
}

Вот и всё. Красивого вам Геткурса!

Тимур

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

Один комментарий к “Наборы иконок для меню GetCourse”

  1. Михаил сказал:

    Добрый день. Сделал все по вашей инструкции, но не отображатеся иконка «Пользователи», подпись есть, а самой иконки нет

    Ответить

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

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