XenForo - LESS для Font Awesome в баннер и перед ником. | Fi4a.ru

Собрал в кучу коды less для прикручивания иконок.
Делаем иконку перед названием группы в баннере. В extra.less пишем:

Less:

.userBanner--before (@bannerStyle; @content) {
    .userBanner {
        &.@{bannerStyle} {
            strong {
                &:before {
                    content: "\@{content}";
                }
            }
        }
    }
}

.userBanner {
    strong {
        &:before {
            font-family: "FontAwesome";
            padding-right: 3px;
        }
    }
}

потом добавляем для нужной группы:

Less:

.userBanner--before (userBanner--red, f132);

где userBanner--red css, баннера группы, f132 - уникод иконки

Делаем для ника по группе пользователей. В extra.less:

Less:

.username-style-id(@styleId; @content) {
    .username {
        &--style@{styleId} {
            &:before {
                content: "\@{content}";
            }
        }
    }
}

.username {
    & :before {
    font-family: "FontAwesome";
    padding-right: 4px;
    }
}

после добавляем для нужных ников групп:

Less:

.username-style-id (3, f132);

где 3 - id группы, f132 - уникод иконки.

Делаем иконку и цвет персонально. В extra.less:

Less:

.username-user-id (@userId, @content, @usernameColor: false) {
    .username {
        &[data-user-id="@{userId}"] {
            [class*="username--style"] {
                &when (iscolor(@usernameColor)) {
                    color: @usernameColor;
                }
                &:before {
                    content: "\@{content}";         
                }
            }
        }
    }
}

.username {
    & :before {
    font-family: "FontAwesome";
    padding-right: 4px;
    }
}

после для нужного ника:

Less: