Если вы хотите добавить иконки социальных сетей на ваш сайт c Moodle без адаптации темы оформления, тогда «Font Awesome» – это лучшее решение.
Вы можете настроить цвет и размер иконок в соответствии со стилем вашего сайта.
Чтобы начать использовать Font Awesome на сайте, вам сначала нужно добавить CDN на ваш сайт. Для этого перейдите на страницу https://fontawesome.com/start и скопируйте оттуда следующий код:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Затем этот код нужно вставить в раздел <head> HTML-кода вашего сайта. Чтобы сделать это в Moodle, вам необходимо войти на свой сайт как администратор, затем перейти к разделу «Администрирование сайта» -> «Внешний вид» -> «Дополнительный HTML» и вставить код в раздел «В тег HEAD», а затем нажать «Сохранить изменения».
Теперь вам нужно найти иконки, которые вы хотите использовать. Перейдите по ссылке https://fontawesome.com/icons?from=io и найдите нужные иконки.
Как только вы найдете нужную иконку, вам нужно скопировать строку кода. Код будет выглядеть примерно так:
<i class=”fab fa-vk”></i>
Этот код можно вставить в HTML-блок на вашем сайте (или в любом другом месте, где вы можете добавить код). Чтобы добавить блок HTML, необходимо включить режим редактирования на главной странице, затем в блоке «Добавить блок» выбрать «HTML».
После добавления HTML-блока перейдите к его настройке.
Прежде чем вставлять код в блок, сначала включите редактор HTML, щелкнув на значок, как на рисунке ниже.
После этого вставляем код нужной иконки.
Теперь нам нужно добавить ссылку, на которую пользователь будет переходить после нажатия на иконку. Для этого необходимо немного изменить код, который вы вставили. Для этого меняем буквы “i” на английские “a” и добавляем ссылку: href=”ссылка на вашу страницу”. Сейчас код выглядит так:
Теперь можно выключить редактор HTML, снова нажав на кнопку “</>”. Вы должны увидеть в блоке “Содержимое” нужную иконку:
Внешний вид иконки можно улучшить. Для этого мы будем использовать пользовательский CSS. Нажмите “Сохранить” и вернитесь на главную страницу сайта.
Чтобы посмотреть исходный код, вы можете использовать опцию “Инструменты разработчика”, доступную в веб-браузере “Google Chrome”. Для активации этой опции нажмите клавишу F12.
Теперь вы должны увидеть меню, как показано на рисунке ниже.
Теперь нам нужно нажать на выделенный на изображении ниже значок, чтобы мы могли посмотреть исходный код иконки VK, который мы будем изменять.
Сейчас нажмите точно на иконку VK. После этого вы должны увидеть такой код:
Скопируйте этот код.
То, как вы добавите пользовательский CSS в свою тему, будет зависеть от того, какую тему вы используете. В нашем примере мы будем использовать тему Clean, так для этой темы добавить пользовательский CSS немного проще, чем для темы Boost. Выберите «Администрирование сайта» -> «Внешний вид» -> «Темы» -> «Clean». После этого нужно найти текстовое поле с надписью «Custom CSS». Примерно так же добавляется пользовательский CSS в большинстве тем оформления Moodle.
Вставьте скопированный код в это поле:
Так как иконка в CSS считается «шрифтом», чтобы увеличить ее, вы можете включить дополнительную строку в пользовательский CSS. Вы можете изменить значение на нужное вам, в этом примере мы используем размер шрифта (font size) 75 пикселей (75px).
Чтобы изменить цвет иконки, добавьте следующую строку в пользовательский CSS:
color: #597da3;
Набор символов #597da3 – это шестнадцатеричный код цвета (или hex-код), в данном случае это синий цвет VK. Вы можете подобрать любой цвет. В Интернет есть таблицы с цветами и даже палитры, где вы визуально выбираете цвет, а затем получаете код этого цвета.
Теперь, когда пользовательский CSS был добавлен, сохраните внесенные изменения. Сейчас вы должны увидеть на главной странице иконку нужного размера и цвета.
Теперь вы можете повторить предыдущие шаги и добавить другие иконки.
