Welcome!

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

SignUp Now!

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

Статус
В этой теме нельзя размещать новые ответы.
Дек
188
33
Пользователь
Приветствую!
Хотелось узнать каким образом можно добавить иконку к элементу навигации
XenForo 2.3.7
 
Решение
Шрифта 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");
    }
}
...
Ноя
1,838
5,460
Команда форума
Администратор
Код поддерживает 2.3
 
❤️Птиц❤️ • Делай людям добро - оно вернётся
Авг
588
895
Активный
Не отображается корректно
Посмотреть вложение 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,366
1,974
Профессионал
Не отображается корректно
Посмотреть вложение 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");
    }
}
 
❤️Птиц❤️ • Делай людям добро - оно вернётся
Авг
588
895
Активный
Короче не майся, скачай 2.2 и напиши такой код:
CSS:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forums"]:before {
        .m-faContent("\f132");
    }
}
Можешь попробовать на 2.3 использовать
 
Дек
188
33
Пользователь
"Иконки" нету в данном стиле
Есть только типографика
Шрифт пользовательского интерфейса - '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,838
5,460
Команда форума
Администратор
Шрифта 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,586
983
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Чтобы было легче всем лучше юзать юникод:
в 2.3 нет юникодов, о чем писали выше, это сделано в качестве улучшения производительности. в движок на 2.3 хотя бы заходили?
 
Лучше плохо начать, чем хорошо бездействовать
Ноя
2,366
1,974
Профессионал
в 2.3 нет юникодов, о чем писали выше, это сделано в качестве улучшения производительности. в движок на 2.3 хотя бы заходили?
Заходил, но глубоко не углублялся в него, т.к пользуюсь 2.2 и только пока в планах его подробно изучить
 
@viovit_dev
Апр
1,586
983
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Заходил, но глубоко не углублялся в него, т.к пользуюсь 2.2 и только пока в планах его подробно изучить
скоро 2.4, до сих пор люди на 2.2 что-то забыли
 
Дек
188
33
Пользователь
Шрифта 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}

Less:
.p-navEl-link
{
    &:before {
        .m-faBase();
        margin-right: 3px;
    }
    &[data-nav-id="forum_rules"]:before {
        .m-faContent("@fa-var-newspaper");
    }
}
Сначала идет @fa-var- , а после название иконки. Где брать название иконки:
Посмотреть вложение 20126 Посмотреть вложение 20127
Что-то понятнее не стало как подключить иконку
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху