О том, что в стандартном меню Геткурса иконки откровенно страшные, я уже упоминал, когда публиковал материал по их замене на иконочный шрифт FontAwesome. Здесь же хочу поделиться наборами, которые мы собирали в рамках работы над клиентскими проектами.
На данный момент у нас два таких набора иконок: Fluent System Regular и Windows 10 (он же Line Awesome). Иконки от Icons8.com.
Наборы представляют собой иконочный шрифт, который мы собрали из отдельных иконок с помощью сервиса Fontello. В архивах вы найдёте также JSON файлы, с помощью которых сможете импортировать шрифт в сервис, чтобы добавить или удалить иконки.
Все наборы, которые, возможно, будут появляться в последующем, мы будем добавлять на эту страницу, чтобы не плодить лишних записей. Так что сохраняйте в закладки.
Инструкция по установке в конце статьи.
Набор иконок Fluent Sysyem Regular
![Набор иконок для GetCourse Fluent System Regular](https://promotion.team/wp-content/uploads/2022/02/Nabor-ikonok-dlya-GetCourse-Fluent-System-Regular.jpg)
В этом и следующих наборах иконок больше, чем необходимо для меню. В рамках оформления школ мы также меняем иконки в списке уроков и используем их в самих уроках, поэтому добавляем больше, чем нужно для стилизации меню.
Пример внешнего вида меню с установленным набором.
![Набор иконок для GetCourse Fluent System Regular](https://promotion.team/wp-content/uploads/2022/02/Nabor-ikonok-dlya-GetCourse-Fluent-System-Regular-2-960x960.jpg)
Набор иконок в стиле Windows 10 (Line Awesome)
![Набор иконок для GetCourse Windows 10 style](https://promotion.team/wp-content/uploads/2022/02/Nabor-ikonok-dlya-GetCourse-Windows-10-style.jpg)
Пример внешнего вида меню с установленным набором.
![Набор иконок для GetCourse Windows 10 style](https://promotion.team/wp-content/uploads/2022/02/Nabor-ikonok-dlya-GetCourse-Windows-10-style-2-960x960.jpg)
Как установить иконки в GetCourse
- Скачайте архив с иконочным шрифтом, распакуйте его.
- Перейдите в файловое хранилище GetCourse и загрузите все файлы шрифта из папки font (.ttf, .eot, .svg, .woff, .woff2).
- В новой вкладке откройте настройки аккаунта, вкладка «Настройки». Вам нужно поле для вставки дополнительного кода «Счётчики и прочие скрипты для 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://promotion.team/wp-content/uploads/2022/02/Kopirovanie-ssylki-na-fajl-ikonochnogo-shrifta-v-GetCourse-960x485.jpg)
Так по одному замените ссылки на файлы в коде выше.
Важный момент. Ссылка у вас скопируется вот такого вида:
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)*/
}
Вот и всё. Красивого вам Геткурса!
Добрый день. Сделал все по вашей инструкции, но не отображатеся иконка «Пользователи», подпись есть, а самой иконки нет