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

Добавляем FontAwesome на баннеры!

Esil

Проверенные
Сообщения
78
Решения
2
Реакции
15
Баллы
35
Esil добавил(а) новый ресурс:

Добавляем FontAwesome на баннеры! - добавление FontAwesome 4.7.0

Конечно, на форуме есть множество мануалов об этом, но многие не работают, так что здесь я расскажу как добавить иконки FontAwesome на баннеры перед текстом.
Сначала загружаем прикрепленный ZIP-архив и распаковываем его в папку styles/fonts
Затем в шаблоне PAGE_CONTAINER находим тег <head> и добавляем такую строчку:
HTML:
<link rel="stylesheet" href="/styles/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
Затем, переходим в extra.less и добавляете к нужному...

Узнать больше об этом ресурсе...
 
Зачем нужно именно FA 4.7.0? Чем не подходит 5, который уже есть в движке?
 
Если у кого то стоит XF 2.3,можете проверить работоспособность, я просто на 2.3 не проверял
 
Esil, посмотрите, ради всего святого, как разработчики в движке вставляют иконки в less шаблонах. Не надо тащить шрифты в движок свои.
 
Если да, то я домой приду, за комп сяду и переделаю
 
Esil, ну конечно. Разрабы специально переделали эту систему для того чтобы уменьшить объём скачиваемых клиентом данных при загрузке страниц. Вы это фактически откатываете.
 
Esil, ну конечно. Разрабы специально переделали эту систему для того чтобы уменьшить объём скачиваемых клиентом данных при загрузке страниц. Вы это фактически откатываете.
Esil, посмотрите, ради всего святого, как разработчики в движке вставляют иконки в less шаблонах. Не надо тащить шрифты в движок свои.
Исправил.
 
Esil, опять мимо.
1. Вычисляем место где иконка вставляется через CSS, а не напрямую в разметку. Например, поиск:
1754858198339.png
2. Находим в инспекторе стили для иконки.
1754858217589.png
3. Находим селектор поиском по шаблонам.
1754858335118.png
Первый кусок -
1754858397695.png
Второй кусок -
1754858417302.png

Итого для вставки иконки нужны две магические руны:
Less:
.my-awesome-banner
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-iconName);
    }
}

Дальше, если покопаться ещё в шаблонах, то можно обнаружить что есть конструкции .m-faBefore(); и .m-faAfter();.
Они ещё сильнее упрощают реализацию:
Less:
.my-awesome-banner
{
    .m-faBefore(@fa-var-cog);
}

+ данный метод не привязан к какой-то конкретной версии движка
 
Последнее редактирование:
Esil, опять мимо.
1. Вычисляем место где иконка вставляется через CSS, а не напрямую в разметку. Например, поиск:
Посмотреть вложение 159088
2. Находим в инспекторе стили для иконки.
Посмотреть вложение 159089
3. Находим селектор поиском по шаблонам.
Посмотреть вложение 159090
Первый кусок -
Посмотреть вложение 159091
Второй кусок -
Посмотреть вложение 159092

Итого для вставки иконки нужны две магические руны:
Less:
.my-awesome-banner
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-iconName);
    }
}

Дальше, если покопаться ещё в шаблонах, то можно обнаружить что есть конструкции .m-faBefore(); и .m-faAfter();.
Они ещё сильнее упрощают реализацию:
Less:
.my-awesome-banner
{
    .m-faBefore(@fa-var-cog);
}

+ данный метод не привязан к какой-то конкретной версии движка
Сегодня попробую на своем форуме, добавлю.
Я сначала у себя пробую, у меня два форума, 2.2 и 2.3
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу