Добавляем Font Awesome в баннеры групп

[Hope]

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

Добавляем Font Awesome в баннеры групп - Добавляем Font Awesome в баннеры групп.

Для добавления своей иконки Font Awesome к стандартному баннеру группы, достаточно просто в шаблон EXTRA.css прописать такое:

.userBanner.bannerRed:before {
    content: "\f132";
    font-family: FontAwesome;
    padding-right: 4px;
}

На примере стандартного красного баннера для группы:
Посмотреть вложение 44103

В итоге баннер у нас будет выглядеть так:
Посмотреть вложение 44104


Для создания собственного баннера в шаблон EXTRA.css добавляем:...

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

 

[Skaiman]

Звания, имена, баннеры групп

 

[Hope]

Немного иначе описано, а так почти тоже самое имеется здесь: Звания, имена, баннеры групп
Но пускай будет и такой вариант. :)

 

[Skaiman]

Да пускай, просто уже подзабылось :)

 

[Buzzen]

Подскажите как для нескольких групп сделать эту процедуру?

 

[Hope]

Просто прописывайте своё название css класса для другой группы и всё.

 

[Buzzen]

Код иконок как правильно посмотреть? чтоб выбрать свою content: "\f013

 

[Mirovinger]

При просмотре иконки на офф сайте FA, так же присутствует и юникод для каждой иконки -

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

.
Unicode: f1e5

 

[DoctorNws]

Долго искал данную модификацию,в дополнительной панели легенд выглядит кривовато,исправляется изменением размера,но у каждого по разному,так же во многих стилях смотрится ужасно

 

[SuchMuch]

Как называется семейство Glyph Icons?

Прописываю:

.userBanner.supmod:before {
        content: "gi-handshake";
        font-family: Glyphicons;
        padding-right: 4px;

Не видет значок...

 

[Mirovinger]

.userBanner.supmod:before {
       content: "\E490";
       font-family: "Glyphicons Regular","Glyphicons"
       padding-right: 4px;
}

Вообще иконка прописывается в юникоде.

 

[SuchMuch]

.userBanner.supmod:before {
       content: "\E490";
       font-family: "Glyphicons Regular","Glyphicons"
       padding-right: 4px;
}

Вообще иконка прописывается в юникоде.

Не подцепилось (показывает квадрат) - видимо не загружены у меня glyph icons
Вопрос решил подобрав аналог у Font Awesome

Спасибо!

 

[Mirovinger]

Ну, я не мог протестировать, так как не на чём, я примерно набросал.

 

[SuchMuch]

Дело дошло до еще новой группы с новым баннером со значком. Как тогда связать блоки кода с группами?

 

[Mirovinger]

Вы же, начали делать, ч то не получается?

 

[SuchMuch]

Вы же, начали делать, ч то не получается?

Все сделал. Сейчас делаю новую группу, и в новой группе будет свой баннер со своим значком.

Вопрос заключается в том как связать блок кода (extra css), который соотносится с определенной группой

Например:

Группа 1

.userBanner.supmod1 {
   color: white;
   background-color: purple;
   border-color: #7515a5;
}
.userBanner.supmod1:before {
       content: "\f013";
       font-family: FontAwesome;
       padding-right: 4px;
}

"Другой, использующий своё имя CSS-класса" - в поле прописываем: userBanner supmod1

Группа 2

.userBanner.supmod2 {
   color: white;
   background-color: purple;
   border-color: #7515a5;
}
.userBanner.supmod1:before {
       content: "\f013";
       font-family: FontAwesome;
       padding-right: 4px;
}

"Другой, использующий своё имя CSS-класса" - в поле прописываем: userBanner supmod2

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

 

[Captain]

Ну 2 группы, добавляете в Extra.css и прописываете css класс в редактирование группы и всё.

 

[Mirovinger]

Вообще, код можно упростить в разы, даже в мануале от Скаймена описан этот момент.

 

[SuchMuch]

Ну 2 группы, добавляете в Extra.css и прописываете css класс в редактирование группы и всё.

Как правильно прописать? Приведите, пожалуйста, пример на основе одной группы

 

[Captain]

userBanner supmod1