Less для иконок вкладок и меню навигации

[Mirovinger]

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

Less для иконок вкладок и меню навигации - Добавление иконок Font Awesome во вкладки и меню навигации

Да, можно было дать готовый код и инструкции есть на форуме, но хотелось ещё упростить это всё.
По этому для добавление иконок Font Awesome в навигацию, достаточно добавить в extra.less такой код.
(Возможно в будущем не только Font Awesome)

.navigation-icons (@nav-id; @fa-uid; @fa-size: false; @color: false) {
    .p-navEl-link {
            &[data-nav-id="@{nav-id}"]:before {
                padding-right: 4px;
                font: normal normal normal 14px/1...

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

 

[Mirovinger]

Mirovinger обновил(а) ресурс Less для иконок вкладок и меню навигации новой записью:

New

• Во вкладку FAQ, добавлены готовые для использования коды дефолтных пунктов навигации и меню
• Небольшая корректировка для отображения иконок меню

Посмотреть вложение 80372Посмотреть вложение 80373...

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

 

[Mirovinger]

Mirovinger обновил(а) ресурс Less для иконок вкладок и меню навигации новой записью:

XF2.1.x + FA5

• Совместимость с XenForo 2.1.x
• Добавлена возможность указания типа иконки для FA5
• Рефакторинг

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

 

[Karfagen]

Спасибо. Может есть готовое решение для добавления своих иконок, или можно как то здесь добавить?

 

[CrazyHackGUT]

Делаете свой шрифт, и используете его.

 

[Karfagen]

Делаете свой шрифт, и используете его.

Зачем мне делать свой шрифт?

 

[Hope]

Ну Вы же спросили решение для добавления своих иконок. Их можно добавить, используя свой отдельный шрифт. А так да, можете и здесь добавить свои иконки для нужных пунктов по аналогии, мы же не знаем, что именно Вы хотите сделать...

 

[CrazyHackGUT]

Karfagen, если Вам нужно именно свои иконки добавлять (которых нет в Font Awesome), Вам нужно сделать сначала "самопальный шрифт", который их будет содержать, а потом уже подключать его и использовать. Сам метод описан здесь, на примере иконок перед ником пользователя. Если немного включить мозг при чтении и повторении, можно без проблем нужные иконки вставить куда угодно.

 

[Nexrom]

Всем привет! Друзья подскажите как определить id вкладки
И как изменить стиль иконки, а то они только контурные

 

[ASTEROID]

Всем привет! Друзья подскажите как определить id вкладки
И как изменить стиль иконки, а то они только контурные
Посмотреть вложение 118584

Привет. Id навигации тут определить можно - admin.php?navigation/ , найди и нажми на вкладку. А в плане заменить иконку, поищи font awesome иконку в которой буква "i" в кружке. А если тебе кроме контура заполненная нужна, то за это отвечает код

font-weight: 600;

Если я тебя правильно понял, вроде бы все так..

 

[Skaiman]

font-weight здесь не применишь, ну на данный момент, надо в код добавить

 

[ASTEROID]

OFFTOP

Skaiman, как вариант, если он хочет конечно, можно все fa иконки сделать не контурные через этот код.

 

[Skaiman]

можно все fa иконки сделать не контурные через этот код.

это в настройках стиля так то

 

[Nexrom]

Может я не по теме немножко, но как можно применить этот код к меню навигации в мобильной версии в шторке?

 

[ZloyDed]

Может я не по теме немножко, но как можно применить этот код к меню навигации в мобильной версии в шторке?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Skaiman]

Подскажите как можно изменить размер, а то иконки больше аватара - не эстетично как то)))

Убери

                width: 32px;
                text-align: center;

 

[Nexrom]

Убери

                width: 32px;
                text-align: center;

Это не размер иконок, вот если сам не знаешь - не пиши, это ширина блока иконки, если его убрать получиться кривое меню, потому что относительно растрового разрешения иконки не одинакового размера, какие-то шире, какие-то уже.

 

[Skaiman]

Это не размер иконок, вот если сам не знаешь - не пиши, это ширина блока иконки, если его убрать получиться кривое меню, потому что относительно растрового разрешения иконки не одинакового размера, какие-то шире, какие-то уже.

Ну да, стал большим знатоком? Ты просто прочти мануал, там все написано и для изменения размера иконки, надо просто добавить ее размер, отличный от дефолтного 14px

.navigation-icons (forums, f086, 13px);

Где ты увидел растр в этих иконках, это шрифт и вот если не знаешь значения width для этого шрифта, то не спорь пожалуйста :)

 

[Nexrom]

Ну да, стал большим знатоком? Ты просто прочти мануал, там все написано и для изменения размера иконки, надо просто добавить ее размер, отличный от дефолтного 14px

.navigation-icons (forums, f086, 13px);

Где ты увидел растр в этих иконках, это шрифт и вот если не знаешь значения width для этого шрифта, то не спорь пожалуйста :)

Нет там никакого растра - я имею ввиду то как они отображаются по разному - то есть нужно устанавливать размер блока иконки или получается это

Кривовато как то, не?

 

[Skaiman]

Nexrom, я посмотрел код, там сам код надо переделывать, автор появится проверит все сам. Да и у тебя по месту надо смотреть почему иконки увеличиваются, так то они должны иметь размер родительского шрифта. Да и в любом случае, указанный width: 32px, слишком большой, лучше использовать em, что бы изменения размера шли от размера родительского шрифта.