Иконки FontAwesome
В MF для иконок можно использовать шрифт FontAwesome 5 и его краткий вариант IM-иконки.
Для того, чтобы иконки отображались на сайте, их нужно включить в Настройках шаблона — CSS профили. Выберите файл fontawesome5-lazy.css.FontAwesome 5
Пятая версия FontAwesome доступна в виде нескольких файлов шрифтов. Эти шрифты содержат разные наборы иконок, поэтому первым классом иконки следует указать их принадлежность:
-
fas— solid-шрифт -
far— reqular-шрифт -
fab— brand-шрифт
Только после этого указывается конкретный класс иконки с префиксом fa-. FontAwesome 5 содержит примерно 1600 иконок.
<i class="fas fa-anchor"></i> <i class="fab fa-whatsapp"></i> <i class="far fa-comments"></i> <i class="fas fa-comments"></i>
Для подбора иконок вы можете воспользоваться галереей на сайте FontAwesome (версия Free).
Прочие классы для иконок
Следует понимать, что FA-иконки это не что иное, как текст, поэтому к ним применяются все те же правила, что и для обычного текста. С помощью Berry-классов можно установить цвет, размер, фон, отступы как и для текста.
<i class="fab fa-optin-monster t300 t-purple700"></i>
По умолчанию для иконок добавляется правый отступ, для того, чтобы она не «прилипала» к тексту. Если отступ не нужен, то следует указать класс icon0.
<a class="fas fa-comment" href="#">Комментарии</a> <a class="fas fa-comment icon0" href="#">Комментарии</a>
Если иконка должна отличаться от текущего текста html-тэга, то она формируется отдельно. Обычно для этого используется тэг I.
<a class="button fas fa-upload" href="#">Скачать</a> <a class="button" href="#"><i class="fas fa-upload t-red300"></i>Скачать</a>
Для иконок можно создавать более сложный дизайн:
<i class="fas fa-pastafarianism t300 bg-blue700 t-white icon0 pad10"></i>
Форма иконки задается Berry CSS классами icon-circle, icon-square и icon-rounded:
<i class="fab fa-monero t200 t-white bg-green600 icon-circle"></i> <i class="fab fa-monero t200 t-white bg-green600 icon-square"></i> <i class="fab fa-monero t200 t-white bg-green600 icon-rounded"></i>