ExBB Community » Файловый ExBB » Модификации и дополнения » Подключение Font Awesome к форуму

Страниц (1): [1]
 

1. WolfGeeN - 21 января 2018 — 15:12 - перейти к сообщению
Поделюсь инструкцией по подключению FA к форуму, может будет кому-нибудь полезна. Закатив глазки
На мой взгляд это достойная замена иконкам-изображениям.1

Font-awesome - это иконочный шрифт, который содержит в себе более 650 иконок.
Преимущество использования иконочного шрифта над изображениями, в масштабировании иконок без потери качества при любом увеличении (обычно изображения, если только они не прилично большо́го разрешения, при масштабе расплываются) и отсутствие нагрузки при загружении страницы.
Подключить font awesome на форум можно 2 путями- скопировав папку со шрифтами на свой форум или через CDN, путем добавления одной единственной ссылки. В этом случае шрифт не будет занимать место на вашем сервере, но в случае неполадок с сайтом, на котором расположен font awesome, иконки перестанут отображаться и у вас.
Поэтому лично я рекомендую не жалеть этих полутора мегабайт, а скачать и загрузить шрифт к себе.
Инструкция по подключению шрифта.

Скрытый текст:
Для просмотра Вам необходимо авторизоваться




(Добавление)


Использование font-awesome на форуме

Самое простое использование font awesome - напрямую html тегом.
Для этого открываем ссылку на список иконок ссылка, находим понравившуюся и кликаем по ней.

Далее мы видим теги для задействования иконки. Например иконка рупора - "[icon]bullhorn[/icon]" имеет следующий код:

CODE:
<i class="fa fa-bullhorn" aria-hidden="true"></i>


Если нам нужно использовать иконку большего размера, то к классу добавляется fa-2x. Цифру 2 можно заменить на большую, для еще большего увеличения масштаба иконки.



Пример иконки с максимальным масштабом:

CODE:
<i class="fa fa-bullhorn fa-5x" aria-hidden="true"></i>


Иконки можно также подключать используя css - через content, before и after.
Пример подключения иконки перед элементом, через before

CODE:
.myclass:before { font-family: FontAwesome; content: "\f095"; }.


При этом название иконки заменяется на ее код - f095.
Код каждой иконки можно увидеть при ее детальном просмотре на сайте:



Также иконки можно поворачивать, анимировать, накладывать друг на друга и много другое. Об этом, вместе с примерами использования, вы можете почитать тут - ссылка.
2. Parapsixolog - 18 февраля 2018 — 15:33 - перейти к сообщению
Опять же нет картинок, и оценить данное дополнение без них весьма сложно
3. WolfGeeN - 18 февраля 2018 — 17:34 - перейти к сообщению
К сожалению я не могу исправить сообщение, поэтому приложу иллюстрации к этому посту.
Я перезалила изображения на нейтральный хостинг.





Код иконок для css



Масштаб иконок



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


Яндекс.Метрика   

Powered by ExBB
[Script Execution time: 0.0149]     [ ]