Добавляем FontAwesome на баннеры

[Itnull]

Совместимость с XenForo 2.2 2.3

Конечно, на форуме есть множество мануалов об этом, но многие не работают, так что здесь я расскажу как добавить иконки FontAwesome на баннеры перед текстом.
Переходим в extra.less и добавляете к нужному баннеру такой код:

.banner:before {
    content: "\uni \00a0";
    font-family: 'FontAwesome 5 Pro';
}

Вместо uni вставляем unicode нужной FontAwesome иконки.
Например: наш баннер называется test
Пример:

.test {
    margin: 2px;
    padding: 5px;
    font-weight: bolder;
    border-radius: 10px;
    border: 2px solid #000;
}
.test:before {
    content: "\f001 \00a0";
    font-family: 'FontAwesome 5 Pro';
}

Это поставит иконку как на скриншоте.
Также можно добавлять баннеры таким образом:

.GroupBanner(@group, @color, @bg, @uni) {
    .userBanner {
        код баннера (обычного, то есть по типу margin, padding, border-radius, font-weight и тд.)
        &.@{group} {
        color: @color;
        background-color: @bg;
        }
        &.@{group}:before {
            content: "\@{uni} \00a0";
            font-family: 'FontAwesome 5 Pro';
        }
    }
}

Далее баннеры добавляем таким образом:

.GroupBanner(name, #fff, #f00, f001);

На 2.3 в движок встроены только SVG-иконки, так что, используем их.
Добавляя :before, используем код, представленный ниже.

display: inline-block;
content: "";
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
width: 1.28571429em;
mask: url('/styles/fa/solid/user.svg') no-repeat center;
-webkit-mask: url('/styles/fa/solid/user.svg') no-repeat center;

В свойстве background-color, currentColor Ставит самому значку цвет текста, его можно на свой по желанию