Префиксы тем с иконками

Мануал Префиксы тем с иконками

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
Skaiman разместил(а) новый ресурс:

Префиксы тем с иконками - Префиксы тем с возможностью добавления Font Awesome

Добавляем в extra.less, лучше модификацией
Less:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.

Посмотреть страницу этого ресурса...
 

Gosha270712

Пользователь
Регистрация
28.01.23
Сообщения
2
Реакции
0
Баллы
13
помоги пж не работает!
 

akelrman

Проверенный
Регистрация
18.11.23
Сообщения
13
Реакции
5
Баллы
20

Desktop Screenshot 2023.11.18 - 17.38.44.36.png
Меняю иконку, но на какую либо я не поменял нечего не меняется что делать?
@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit; // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4); // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5); // Цвет тени префикса

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
.svgPrefix, .label.svgPrefix {
font-family: @svgPrefixFontFamily;
font-size: 70%;
font-weight: 500;
display: inline-flex;
text-align: center;
align-items: center;
text-transform: uppercase;
line-height: ((@xf-lineHeightDefault) * .9);
padding: .25em .5em;
border: none;
border-radius: @svgPrefixBorderRadius;
position: relative;
white-space: nowrap;
.fsp & {
margin-right: 5px;
}
.menuPrefix& {
display: inline-block;
font-size: 1.3em;
width: 100%;
padding: .333em;
a& {
text-decoration: none;
}
}
.p-title-value & {
.p-title & {
font-size: 70%;
}
}
&:before {
position: absolute;
top: .25em;
bottom: 0;
left: .333em;
}
&.@{prefix-name} {
background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
color: rgb(250,250,250);
text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
&when (iskeyword(@prefix-icon)) {
padding: .25em .5em .25em 1.75em;
&:before {
.m-faBase();
content: "\@{prefix-icon}";
}
}
}
}
.svgLabelPrefix(important, rgb(198,40,40), f06a);

В ccs стиль svgPrefix important

Меняю иконки через сайт Feather Classic Solid Icon | Font Awesome
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85

akelrman

Проверенный
Регистрация
18.11.23
Сообщения
13
Реакции
5
Баллы
20
Взял иконку с сайта который вы дали, нечего не поменялось
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
перенес в тему ресурса и впредь задавать вопросы в темах
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
Взял иконку с сайта который вы дали, нечего не поменялось
Для того что бы ответить надо знать немного больше, к примеру версия движка, версия стиля, название стиля, ui-x стили имеют свои заморочки
 

akelrman

Проверенный
Регистрация
18.11.23
Сообщения
13
Реакции
5
Баллы
20
Для того что бы ответить надо знать немного больше, к примеру версия движка, версия стиля, название стиля, ui-x стили имеют свои заморочки
Версия движка xenforo 2.2.8 стиль style-io под 2.2.8
Сообщение автоматически объединено:

Desktop Screenshot 2023.11.18 - 18.04.50.24.png
 

akelrman

Проверенный
Регистрация
18.11.23
Сообщения
13
Реакции
5
Баллы
20
ну как и предполагал, в этом стиле используется два вида иконок и поменять на font awesome можно в настройках стиля
а где именно? как найти эту переменную в настройках
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
я не помню, постарайся уж сам поискать :)
 
  • Нравится
Реакции: Izok

Tom

Пользователь
Регистрация
05.02.24
Сообщения
3
Реакции
0
Баллы
13
Не получается что делать?
 

Tom

Пользователь
Регистрация
05.02.24
Сообщения
3
Реакции
0
Баллы
13
Получить проверенного, не не флудить и не выпрашвать реакции
Да нет я не могу сделать по вашей инструкции
Сообщение автоматически объединено:

У меня сразу форум слетает что делать?
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
209
Реакции
15
Баллы
65
Скай, ты делал префиксы для 2.2
1711778099342.png
а для 2.3 сделать поправочку в коде можно ?

1711778147953.png
Сообщение автоматически объединено:

посмотрел как турки реализовали иконки
1711782115889.png
Код:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
но не понимаю как это применить к префиксам
 
Последнее редактирование:

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
посмотрел как турки реализовали иконки
Посмотри у вьетнамцев еще :) там ни каким боком не относится к коду префиксов. Потом гляну, не до них. Не понимаю для чего эта спешка с 2.3?
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
2 073
Решения
33
Реакции
1 448
Баллы
85
Для версии движка 2.3, я изменил код:
Less:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
В примере создан префикс important, выделен в коде. По аналогии ниже добавляем нужные префиксы, если указать:
Less:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
то префикс будет без иконки с названием prefix, с фоном #0D47A1 и цветом текста #fff, если указать так:
Less:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
то добавляется иконка Font Awesome с названием info-circle, иконки ЗДЕСЬ, дополнительно можно добавлять стиль иконок, solid, regular, light, duotone
Less:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
2024-03-31_085252.png
 

Похожие темы

Верх Низ