Font-awesome - это иконочный шрифт, который содержит в себе более 650 иконок.
Преимущество использования иконочного шрифта над изображениями, в масштабировании иконок без потери качества при любом увеличении (обычно изображения, если только они не прилично большо́го разрешения, при масштабе расплываются) и отсутствие нагрузки при загружении страницы.
Подключить font awesome на форум можно 2 путями- скопировав папку со шрифтами на свой форум или через CDN, путем добавления одной единственной ссылки. В этом случае шрифт не будет занимать место на вашем сервере, но в случае неполадок с сайтом, на котором расположен font awesome, иконки перестанут отображаться и у вас.
Поэтому лично я рекомендую не жалеть этих полутора мегабайт, а скачать и загрузить шрифт к себе.
Инструкция по подключению шрифта.
- Для начала следует посетить официальный сайт разработчика font-awesome - http://fontawesome.io/icons/
- Если вы решили скачивать шрифт себе, то откройте эту страницу и нажмите на "Download" - ссылка .
- Распакуйте архив со шрифтом. Полученное у распакованной папки название измените на font_awesome (цель этого действия убрать пробелы и версию из путей).
- Скопируйте папку font_awesome без изменений в папку вашего стиля.
- Откройте /templates/ваш стиль/all_header.tpl и добавьте перед
code:
<link rel="alternate" type="application/rss+xml" title="<?php echo $GLOBALS['fm']->exbb['boardname']; ?>"
href="./tools.php?action=rss">
href="./tools.php?action=rss">
ссылку на шрифт
code:
<link rel="stylesheet" href="./templates/ваш стиль/font_awesome/css/font-awesome.min.css">
Внимание Не забудьте поменять в ссылке ваш стиль на название вашего стиля.
- Сохраните изменения. Если вы все сделали согласно инструкции, то теперь в вашем стиле подключен иконочный шрифт font awesome.
- Если вы не желаете скачивать и копировать шрифт к себе, то воспользуйтесь ссылкой CDN.
Для этого откройте /templates/ваш стиль/all_header.tpl и добавьте перед
code:
<link rel="alternate" type="application/rss+xml" title="<?php echo $GLOBALS['fm']->exbb['boardname']; ?>"
href="./tools.php?action=rss">
href="./tools.php?action=rss">
следующую строчку:
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Никаких правок проводить в ней не нужно. Просто сохраните файл и теперь 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.
Код каждой иконки можно увидеть при ее детальном просмотре на сайте:
Также иконки можно поворачивать, анимировать, накладывать друг на друга и много другое. Об этом, вместе с примерами использования, вы можете почитать тут - ссылка.