На мой взгляд это достойная замена иконкам-изображениям.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.
Код каждой иконки можно увидеть при ее детальном просмотре на сайте:
Также иконки можно поворачивать, анимировать, накладывать друг на друга и много другое. Об этом, вместе с примерами использования, вы можете почитать тут - ссылка.
