Как подключать иконки FontAwesome в XenForo 2.3

[baltun]

Покажем на примере в Xenforo 2.2 было все так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 90%;
    padding-right: 2px;
}

В XenForo 2.3 и видимо в XenForo 3.0 будет так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    .m-faContent(@fa-var-star);
    font-size: 90%;
    padding-right: 2px;
}

 

[hacker]

[MMO] Navigation tab icons оно же работает на 2.3

Как бы еще их анимировать? Пытался не смог.

.node-extra-title:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-reply);
    padding-right: 4px;
    display: inline-block;
    font-weight: 400;
}
.node-extra-date:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    display: inline-block;
    font-weight: 400;
}
.node-extra-user .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
    display: inline-block;
    font-weight: 400;
}


.structItem-minor .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-parts .structItem-startDate:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-latestDate:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-minor .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
}

-duotone можно удалить или добавить предпочтительный стиль значков.




Примеры приведены в таблице ниже:

Тип	Код
Шаблоны / модификации шаблонов	HTML: <xf:fa icon="fas fa-comments" />
Less шаблоны	less: .m-faIcon(@fa-var-solid-comments);
JavaScript	JavaScript: XF.Icon.getIcon('solid', 'fa-comments')
Фразы	Код: {icon:fas::comments}