Иконка ресурса

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

Hope

Premium
Сообщения
48,306
Решения
22
Реакции
71,864
Баллы
40,905
Пользователь Hope разместил новый ресурс:

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

Для добавления своей иконки Font Awesome к стандартному баннеру группы, достаточно просто в шаблон EXTRA.css прописать такое:
Код:
.userBanner.bannerRed:before {
    content: "\f132";
    font-family: FontAwesome;
    padding-right: 4px;
}

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

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


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

Узнать больше об этом ресурсе...
 
Да пускай, просто уже подзабылось :)
 
Подскажите как для нескольких групп сделать эту процедуру?
 
Просто прописывайте своё название css класса для другой группы и всё.
 
Код иконок как правильно посмотреть? чтоб выбрать свою content: "\f013
 
При просмотре иконки на офф сайте FA, так же присутствует и юникод для каждой иконки - .
Unicode: f1e5
 
Долго искал данную модификацию,в дополнительной панели легенд выглядит кривовато,исправляется изменением размера,но у каждого по разному,так же во многих стилях смотрится ужасно
 
Как называется семейство Glyph Icons?

Прописываю:
Код:
.userBanner.supmod:before {
        content: "gi-handshake";
        font-family: Glyphicons;
        padding-right: 4px;

Не видет значок...
 
Код:
.userBanner.supmod:before {
       content: "\E490";
       font-family: "Glyphicons Regular","Glyphicons"
       padding-right: 4px;
}
Вообще иконка прописывается в юникоде.
 
Последнее редактирование:
Код:
.userBanner.supmod:before {
       content: "\E490";
       font-family: "Glyphicons Regular","Glyphicons"
       padding-right: 4px;
}
Вообще иконка прописывается в юникоде.
Не подцепилось (показывает квадрат) - видимо не загружены у меня glyph icons
Вопрос решил подобрав аналог у Font Awesome

Спасибо!
 
Ну, я не мог протестировать, так как не на чём, я примерно набросал.
 
Дело дошло до еще новой группы с новым баннером со значком. Как тогда связать блоки кода с группами?
 
Вы же, начали делать, ч то не получается?
 
Вы же, начали делать, ч то не получается?
Все сделал. Сейчас делаю новую группу, и в новой группе будет свой баннер со своим значком.

Вопрос заключается в том как связать блок кода (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

Как правильно будет сделать?
 
Ну 2 группы, добавляете в Extra.css и прописываете css класс в редактирование группы и всё.
 
  • Мне нравится
Реакции: Hope
Вообще, код можно упростить в разы, даже в мануале от Скаймена описан этот момент.
 
  • Мне нравится
Реакции: Hope
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу