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

[Hope]

Пользователь Hope разместил новый ресурс:

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

Очередной вариант добавления Font Awesome к навигацианным вкладкам.

Выглядеть это будет так:

Посмотреть вложение 28680


В шаблон EXTRA.css добавляем:

.navTab.forums .navLink:before {
content: '\f0e6';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}

Поддержку других плагинов можно добавить следующим образом:

Форумы - .navTab.forums .navLink:before
Пользователи - .navTab.members .navLink:before
Ресурсы -...

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

 

[koris]

Может немного оффтоп... но все же:
Советов по использованию Font Awesome уже достаточно встречается на форуме...

Может быть их как то систематизировать и выложить в отдельной теме?
Чтобы не приходилось каждый раз искать по всему форуму?

 

[Hope]

Может быть

Не может быть. :)

 

[Time]

font-family: FontAwesome; - Код иконки вводить тут?

 

[Mirovinger]

.navTab.forums .navLink:before {
content: '\f0e6';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}

Код иконки меняем здесь.

content: '\f0e6';

Выделил красным.

 

[Time]

Каталог организаций - .navTab.directory .navLink:before

 

[>.P.S.I.X.<]

вот я не понял, а откуда надо брать код иконки ?

 

[Time]

Unicode: f0c4

 

[>.P.S.I.X.<]

Посмотреть вложение 28716
Unicode: f0c4

но а где брать такие картинка или ка их делать?

но а где брать такие картинка или ка их делать?

Вроде понял где их брать,но когда вставил в кнопку форум то выглядит так , а пользователи вообще не отображается

 

[Mirovinger]

А Font Awesome, Вы вообще подключили?

 

[>.P.S.I.X.<]

А Font Awesome, Вы вообще подключили?

а как его подключить?

 

[Mirovinger]

https://xenforo.info/resources/font-awesome-Локальная-установка-и-подключение.2051/

 

[Laseg]

Мой вариант проще для добавления новых иконок:

.navTabs .navLink:before{position: absolute;width: 0px;left: 0px;font-family: FontAwesome;font-size: 15px;display: block;}
.navTabs .navLink{padding-left: 16px;}
.navTab.forums .navLink:before{content: "\f0e6";}
.navTab.members .navLink:before{content: "\f0c0";}
.navTab.showcase .navLink:before{content: "\f07a";}
.navTab.sonnb_xengallery .navLink:before{content: "\f030";}
.navTab.xfa-blogs .navLink:before{content: "\f1b9";}
.navTab.portal .navLink:before{content: "\f015";}

 

[Skaiman]

Мой вариант проще для добавления новых иконок:

Но не совсем правильный :) зачем там абсолютное позиционирование? Тогда уж так:

.navTab .navLink:before {
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}
.navTab.forums .navLink:before{content: "\f0e6";}
.navTab.members .navLink:before{content: "\f0c0";}
.navTab.showcase .navLink:before{content: "\f07a";}
.navTab.sonnb_xengallery .navLink:before{content: "\f030";}
.navTab.xfa-blogs .navLink:before{content: "\f1b9";}
.navTab.portal .navLink:before{content: "\f015";}

 

[Laseg]

Но не совсем правильный :-) зачем там абсолютное позиционирование? Тогда уж так:

.navTab .navLink:before {
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}
.navTab.forums .navLink:before{content: "\f0e6";}
.navTab.members .navLink:before{content: "\f0c0";}
.navTab.showcase .navLink:before{content: "\f07a";}
.navTab.sonnb_xengallery .navLink:before{content: "\f030";}
.navTab.xfa-blogs .navLink:before{content: "\f1b9";}
.navTab.portal .navLink:before{content: "\f015";}

Абсолютное позиционирование нужно, чтобы вкладки не рвало на разных стилях. Скрин кинуть, что происходит с вашим кодом на недефолтном стиле?

 

[Skaiman]

Скрин я сам кинуть могу

Ни чего не происходит, если нормальный стиль :-)

У тебя рвет по другой причине, ты сделал иконку блочным элементом, это подразумевает перенос строки в начале и в конце элемента, а ширину блока делаешь 0.
Такое впечатление, что ты подставил значения, методом тыка, даже не понимая особо, что делаешь :)

 

[Malezha]

Skaiman,

на недефолтном стиле

 

[Skaiman]

Malezha, да какая разница, просто я написал, что сделано не правильно, можно на любом сделать, но не таким неграмотным способом.

 

[Laseg]

Malezha, да какая разница, просто я написал, что сделано не правильно, можно на любом сделать, но не таким неграмотным способом.

Нормальный метод, грамотный. :-)
А вот что получилось с вашей правкой:

Названия вкладок сказали "давайдосвиданья".
Так что, оставлю я свою правку. С ней вкладки навигации выглядят вот так:

 

[s7ranger]

Добавьте в мануал код для главной

Главная - .navTab.home .navLink:before

Не знаю имеет смысл дополнить в мануал или нет, решайте сами.
Если добавлен в меню свой пункт меню - Дополнительная вкладка в меню навигации, то вместо

<li class="navTab PopupClosed"><a href="{xen:link account/upgrades}" class="navLink">Premium</a></li>

надо вставить

<li class="navTab ХХХ PopupClosed"><a href="{xen:link account/upgrades}" class="navLink">Premium</a></li>

где ХХХ-любые символы, а следовательно для иконки код будет таким

.navTab.ХХХ .navLink:before{