Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Добавление иконки к элементу навигации

Дек
57
4
Пользователь
Приветствую!
Хотелось узнать каким образом можно добавить иконку к элементу навигации
XenForo 2.3.7
 
Ноя
1,705
4,521
Команда форума
Администратор
Код поддерживает 2.3
 
❤️Птиц❤️
Авг
302
287
Активный
Не отображается корректно
Посмотреть вложение 20114

extra less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("\fa-newspaper-o");
    }
}
В 2.3 пиши extra.less
CSS:
.p-navEl-link[data-nav-id="изменить на ID навигации"]::before {
    .m-faIcon(@название значка);
}
Пример:
CSS:
.p-navEl-link[data-nav-id="forum_rules"]::before {
    .m-faIcon(@fa-var-shield);
}
 
Лучше плохо начать, чем хорошо бездействовать
Ноя
2,176
1,451
Профессионал
Не отображается корректно
Посмотреть вложение 20114

extra less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("\fa-newspaper-o");
    }
}
Чтобы было легче всем лучше юзать юникод:
Less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("\f1ea");
    }
}
 
Дек
57
4
Пользователь
"Иконки" нету в данном стиле
Есть только типографика
Шрифт пользовательского интерфейса - 'Inter', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif
Шрифт тела страницы - 'Inter', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif
Шрифт кода - Monaco, Menlo, Consolas, 'Roboto Mono', 'Andale Mono', 'Ubuntu Mono', monospace
1769939358899.png
 
Ноя
1,705
4,521
Команда форума
Администратор
Шрифта Font Awesome в XenFore 2.3.x больше нет, то есть юникоды использовать не сможете. Доступные способы вызова иконок:

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

extra less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("\fa-newspaper-o");
    }
}
Less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("@fa-var-newspaper");
    }
}
Сначала идет @fa-var- , а после название иконки. Где брать название иконки:
1769940533896.png 1769940565716.png
 
@viovit_dev
Апр
1,367
873
Продавец
Чтобы было легче всем лучше юзать юникод:
в 2.3 нет юникодов, о чем писали выше, это сделано в качестве улучшения производительности. в движок на 2.3 хотя бы заходили?
 
Лучше плохо начать, чем хорошо бездействовать
Ноя
2,176
1,451
Профессионал
в 2.3 нет юникодов, о чем писали выше, это сделано в качестве улучшения производительности. в движок на 2.3 хотя бы заходили?
Заходил, но глубоко не углублялся в него, т.к пользуюсь 2.2 и только пока в планах его подробно изучить
 
Сверху