Введение​

(Пропустите вступление и переходите сразу к примерам)

Есть две основные ситуации, в которых вы можете использовать значки font awesome (или другие).

1. Псевдоэлементы (до и/или после текста)​

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

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

.m-faContent(@fa-var-icon-name); = regular

.m-faContent(@fa-var-duotone-icon-name); =duotone

.m-faContent(@fa-var-solid-icon-name); = solid

.m-faContent(@fa-var-light-icon-name); = light

Это когда вы просто показываете значок в шаблоне или html. Вы используете этот синтаксис:

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

2. Непосредственно в шаблоне​

Это когда вы просто показываете значок в шаблоне или html. Вы используете этот синтаксис:

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

Ниже приведены некоторые конкретные примеры

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

• Заменить значок узла по умолчанию​

• Добавление значка к префиксу ntvs​

• Значки в навигации​

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

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

В шаблоне extra.less

Измените идентификационный номер в соответствии с


Duotone

Solid


Light


ПРИМЕЧАНИЕ: Вы можете добавить другие стили CSS, например, цвет, размер шрифта, поля и т.д.


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

Чтобы заменить значок по умолчанию, добавьте его в шаблон extra.less:


Note that the second part (svg...) removes the default xenForo icon.


Замените значок отдельного узла
(обратите внимание, что вам не нужно удалять svg, если это уже сделано, как указано выше, для всех узлов)



Измените идентификационный номер в соответствии с


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

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


После текста


И до, и после


Значки в навигации
1. Добавьте значок к тексту

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

Значок перед заголовком навигации, например, для вкладки Форумы (идентификатор навигации = forums)

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


Значок после навигационного заголовка

2. Значок в качестве заголовка навигации вместо текста​

Элементы навигации основаны на фразах, поэтому для существующих элементов навигации (по умолчанию в xenforo) вам необходимо найти нужную фразу. Вы можете найти все фразы, выполнив поиск по названию в панели управления администратора > Внешний вид > Поисковые фразы. Все навигационные фразы начинаются с nav. таким образом, их довольно легко найти, даже если есть несколько похожих фраз. например, Forums - это фраза nav.forums. Вы просто меняете фразу, используя этот синтаксис:

{icon:far::icon-name}

Например:

Regular
{icon:far::sparkles}

Solid
{icon:fas::sparkles}

Duotone
{icon:fad::sparkles}

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

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

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

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

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

Regular

Solid (fas)
Duotone (fad)

Light (fat)

Duotone (fad)

Значки могут быть ссылками:

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

Обратите внимание, что помимо встроенного CSS (как указано выше, style="..."), вы также можете определить класс для использования в вашем CSS (в шаблоне extra.less).
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true"/>