Шаблон MF 9.0

Иконки FontAwesome

В MF для иконок можно использовать шрифт FontAwesome. Существуют два варианта этого шрифта: 4-я версия и 5-я.

Для того, чтобы иконки отображались на сайте, их нужно включить в Настройках шаблонаCSS профили. Выберите файл fontawesome4-lazy.css (для FA4) и fontawesome5-lazy.css .

FontAwesome 4

В версии FA 4.7.0 один файл шрифта и в нём содержится 675 иконок.

Для указания такой иконки применяются css-классы, начинающиеся с префикса i- (а не fa-).

<a class="i-home" href="#">Главная</a>
Классы четвёртой версии FontAwesome в MF 7.0 заменены на пятую версию, поэтому если вы не используете иконки FA 4, то файл fontawesome4-lazy.css можно не подключать.

FontAwesome 5

Пятая версия FontAwesome доступна в виде нескольких файлов шрифтов. Эти шрифты содержат разные наборы иконок, поэтому первым классом иконки следует указать их принадлежность:

Только после этого указывается конкретный класс иконки с префиксом fa-. FontAwesome 5 содержит 1598 иконок.

<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>