Инструкция Font Awesome Icons 2.3 – категории, узлы, префиксы, фразы, шаблоны и др.

Введение​

(Пропустите вводную часть и перейдите сразу к примерам)

Есть два основных способа использования Font Awesome (или других) иконок в XenForo:

1. Псевдоэлементы (before &/or after text)​

В этом случае через CSS задается отображение иконки перед или после текста, например, в названии узла, префиксе или элементе навигации. Обычно это реализуется добавлением CSS-кода в шаблон extra.less.

Для псевдоэлементов CSS (иконка перед/после текста) используйте следующий синтаксис в extra.less:

.m-faIcon(@fa-var-icon-name); /* Обычная иконка */
.m-faIcon(@fa-var-duotone-icon-name); /* Двухцветная иконка */
.m-faIcon(@fa-var-solid-icon-name); /* Жирная иконка */
.m-faIcon(@fa-var-light-icon-name); /* Легкая иконка */

2. Прямое использование в шаблоне​

Если нужно просто добавить иконку в шаблон или HTML, используйте этот синтаксис:

<xf:fa icon="fa-icon-name" aria-hidden="true" />

Что мы будем делать в этом гайде:​

• Добавление иконки в категорию узлов
• Замена стандартной иконки узла
• Добавление иконки в префикс темы
• Использование иконок в навигации
• Добавление иконок в шаблоны

Добавление иконки в категорию узлов​

В шаблоне extra.less измените id в соответствии с вашими настройками.

// Добавление иконки к категории с id=4

.block--category.block--category4 .block-header:before
{
     .m-faIcon(@fa-var-sparkles);
}

Duotone

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-duotone-sparkles);
}

Solid

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-solid-sparkles);
}

Light

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-light-sparkles);
}

Примечание: Вы можете добавить другие CSS-стили, например, цвет, размер шрифта, отступы и т. д.

// Добавление большой красной иконки к категории с id=4

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-sparkles);
      color: red; /* Красный цвет */
      font-size: 36px; /* Увеличенный размер */
}

Замена стандартной иконки узла​

(Как и выше, можно использовать обычные, жирные, легкие или двухцветные иконки)

Чтобы заменить стандартную иконку узла, добавьте следующий код в шаблон extra.less:

.node .node-icon i
{
    &:before
    {
        .m-faIcon(@fa-var-coffee-pot);
        width: 100%;
    }
    svg
    {
        display: none;
    }
}

Примечание: Вторая часть (svg...) удаляет стандартную иконку XenForo.

Замена иконки для конкретного узла​

(Если стандартные иконки уже были удалены выше, svg можно не указывать повторно)

Измените id узла в соответствии с вашими настройками.

.node.node--id8 .node-icon i
{
    &::before
    {
        .m-faIcon(@fa-var-bullhorn);
    }
 
     svg
    {
        display: none;
    }
 
}

Добавление иконки к префиксу темы​

Например, для светло-зеленого префикса (в шаблоне extra.less):

Перед текстом​

.label.label--lightGreen:before
{
.m-faIcon(@fa-var-flower-tulip); }

После текста​

.label.label--lightGreen:after {
        .m-faIcon(@fa-var-flower-daffodil);}

Как до, так и после​

.label.label--lightGreen {
 
    &:before {
        .m-faIcon(@fa-var-flower-tulip);
 
    }
    &:after {
        .m-faIcon(@fa-var-flower-daffodil);
 
    }
}

Иконки в навигации​

1. Добавление иконки к тексту

Сначала найдите id навигации. Это текст в верхнем поле настроек навигации в панели администрирования.

Иконка перед заголовком навигации
Например, для вкладки Forums (id навигации = forums)

Добавьте это в extra.less:

[data-nav-id="forums"]:before
{
    .m-faIcon(@fa-var-comments);
    margin-right:5px
}

Иконка после заголовка навигации​

[data-nav-id="forums"]:after
{
     .m-faIcon(@fa-var-comments);
     margin-left:5px;
}

2. Иконка как заголовок навигации вместо текста, также для фраз.​

Элементы навигации основаны на фразах, поэтому для существующих (по умолчанию в XenForo) элементов навигации нужно найти соответствующую фразу. Вы можете найти все фразы, поискав заголовок в Admin Control Panel > Appearance > Search Phrases. Все фразы навигации начинаются с nav., поэтому их легко найти, даже если есть несколько похожих фраз. Например, для Forums фраза будет nav.forums. Чтобы изменить фразу, используйте этот синтаксис:

{icon:far::icon-name}

Примеры:

• Обычная иконка:
  {icon:far::sparkles}
• Жирная иконка:
  {icon:fas::sparkles}
• Двухцветная иконка:
  {icon:fad::sparkles}

Для цветной иконки используйте span с инлайновым стилем:

<span style="color:yellow">{icon:far::sparkles}</span>

Для пользовательских элементов навигации можно добавить тот же код непосредственно в настройки навигации в поле Title.

Добавление иконок в шаблоны​

Добавьте этот код туда, где хотите, чтобы иконки отображались в шаблоне XenForo или рекламе. Вы можете использовать его как чистую иконку или внутри ссылки.

Обычная иконка​

<xf:fa icon="fa-sparkles" aria-hidden="true"/>

Жирная иконка (fas)​

<xf:fa icon="fas fa-sparkles" aria-hidden="true"/>

Двухцветная иконка (fad)​

<xf:fa icon="fad fa-sparkles" aria-hidden="true"/>

Легкая иконка (fat)​

<xf:fa icon="fal fa-sparkles" aria-hidden="true"/>

Иконки могут быть ссылкой:​

<a href="https://example.com/page"><xf:fa icon="fa-sparkles" aria-hidden="true"/></a>

Стилизация с цветом, размером, отступами и т.д.​

<xf:fa style="color:orange;font-size:22px;margin-left:5px;" icon="fad fa-palette" aria-hidden="true" />

Обратите внимание, что кроме inline CSS (как выше style="..."), вы можете использовать класс, который затем можно определить в вашем CSS (в шаблоне extra.less):

<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true"/>