Добавление иконок Font Awesome в виджет - "Панель посетителя"

[Mirovinger]

Mirovinger добавил(а) новый ресурс:

Добавление иконок Font Awesome в виджет - "Панель посетителя" - Font Awesome в панеле пользователя (visitor panel)

Добавляем в шаблон extra.less.

.p-body-sidebar {
    [data-widget-definition="visitor_panel"] {
        .contentRow-minor .pairs {

            dt:before {
                font-family: FontAwesome;
                padding-right: 2px;
            }

            &:nth-child(1) dt:before {
                content: "\f075";
            }

            &:nth-child(2) dt:before {
                content: "\f164";
            }

            &:nth-child(3) dt:before {...

Узнать больше об этом ресурсе...

 

[root]

Мануал под Font Awesome 5, 'Просто заменить шрифт в font-family на Font Awesome 5 Pro

.p-body-sidebar {
    [data-widget-definition="visitor_panel"] {
        .contentRow-minor .pairs {

            dt:before {
                font-family: 'Font Awesome 5 Pro';
                padding-right: 2px;
            }

            &:nth-child(1) dt:before {
                content: "\f075";
            }

            &:nth-child(2) dt:before {
                content: "\f164";
            }

            &:nth-child(3) dt:before {
                content: "\f091";
            }
        }
    }
}

Результат:

 

[25517]

А можно поставить .m-faBase(); вместо font-family: '(.*)';
И будет поддерживаться и 4.7.0 и 5 FA

 

[Mirovinger]

Mirovinger обновил(а) ресурс Добавление иконок Font Awesome в виджет - "Панель посетителя" новой записью:

XF2.1.x + FA5

• Совместимость с XenForo 2.1.x
• Рефакторинг

Узнать больше об этом обновлении...

 

[phost]

Чтото не завелось с другими иконками конфликт вроде, вот так завелось.

.pairs.pairs--justified.fauxBlockLink {
dt {font-family: 'Font Awesome 5 Pro';}
            &:nth-child(1) dt {
                .m-faBefore("\f075");
            }

            &:nth-child(2) dt {
                .m-faBefore("\f164");
            }

            &:nth-child(3) dt {
                .m-faBefore("\f091");
            }
    & dt::before {
                margin-right: 3px;
            }
        }

 

[Mirovinger]

Да ладно, всё тут работает, а уже поправить под себя не проблема, плюс научитесь код оформлять...

 

[Skaiman]

Mirovinger, тот вариант имеет место быть для стилей UI.X, там в панели для пунктов есть класс .fauxBlockLink и он только в панели пользователя, конечно можно было бы оформить код приличнее :)

 

[Mirovinger]

Я то понимаю, но экстрасенсы в отпуске, а в сообщении информации ноль. =)