Иконки соцсетей в Moodle

Как добавить иконки социальных сетей на сайт c Moodle

Если вы хотите добавить иконки социальных сетей на ваш сайт 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».

 

Как добавить иконки социальных сетей на сайт c Moodle

 

После добавления HTML-блока перейдите к его настройке.

Прежде чем вставлять код в блок, сначала включите редактор HTML, щелкнув на значок, как на рисунке ниже.

 

Как добавить иконки социальных сетей на сайт c Moodle

 

После этого вставляем код нужной иконки.

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Теперь нам нужно добавить ссылку, на которую пользователь будет переходить после нажатия на иконку. Для этого необходимо немного изменить код, который вы вставили. Для этого меняем буквы «i» на английские «a» и добавляем ссылку: href=»ссылка на вашу страницу». Сейчас код выглядит так:

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Теперь можно выключить редактор HTML, снова нажав на кнопку «</>». Вы должны увидеть в блоке «Содержимое» нужную иконку:

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Внешний вид иконки можно улучшить. Для этого мы будем использовать пользовательский CSS. Нажмите «Сохранить» и вернитесь на главную страницу сайта.

Чтобы посмотреть исходный код, вы можете использовать опцию «Инструменты разработчика», доступную в веб-браузере «Google Chrome». Для активации этой опции нажмите клавишу F12.

Теперь вы должны увидеть меню, как показано на рисунке ниже.

 

Как добавить иконки социальных сетей на сайт c Moodle

 

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

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Сейчас нажмите точно на иконку VK. После этого вы должны увидеть такой код:

 

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Скопируйте этот код.

То, как вы добавите пользовательский CSS в свою тему, будет зависеть от того, какую тему вы используете. В нашем примере мы будем использовать тему Clean, так для этой темы добавить пользовательский CSS немного проще, чем для темы Boost.  Выберите «Администрирование сайта» -> «Внешний вид» -> «Темы» -> «Clean». После этого нужно найти текстовое поле с надписью «Custom CSS». Примерно так же добавляется пользовательский CSS в большинстве тем оформления Moodle.

Вставьте скопированный код в это поле:

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Так как иконка в CSS считается «шрифтом», чтобы увеличить ее, вы можете включить дополнительную строку в пользовательский CSS. Вы можете изменить значение на нужное вам, в этом примере мы используем размер шрифта (font size) 75 пикселей (75px).

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Чтобы изменить цвет иконки, добавьте следующую строку в пользовательский CSS:

 

color: #597da3;

 

Набор символов #597da3 — это шестнадцатеричный код цвета (или hex-код), в данном случае это синий цвет VK. Вы можете подобрать любой цвет. В Интернет есть таблицы с цветами и даже палитры, где вы визуально выбираете цвет, а затем получаете код этого цвета.

 

Как добавить иконки социальных сетей на сайт c Moodle

 

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

 

Как добавить иконки социальных сетей на сайт c Moodle

 

Теперь вы можете повторить предыдущие шаги и добавить другие иконки.

Поделитесь с друзьями