Подключить Font Awesome на InstantCMS 2

Font Awesome - это очень удобные иконки для дизайнеров, которые выводиться в любой части дизайна а так же в статьях, блогах и новостях.

Подключение к InstantCMS 2

Font Awesome - это шрифты с расширением eot, woff, ttf и svg. А в InstantCMS 2 по умолчанию эти расширение запрещены, по этому если мы подключим их то иконки либо не будут отображаться либо будут отображаться квадратики.

В первую очередь мы должны разрешить эти расширение в файле /templates/.htaccess, для этого откроем файл, в строке 3 видим:

<Files ~ "\.(js|css|xml|png|gif|jpg|jpeg|html|htm|ico|bmp|map)$">

Нам надо заменить эту строку на

<Files ~ "\.(js|css|xml|png|gif|jpg|jpeg|html|htm|ico|bmp|map|eot|woff|ttf|svg)$">

Далее зайдем сюда и скачаем последнюю версию Font Awesome. Из скачанного архива загрузить папку fonts в ваш сервер \templates\ваш-шаблон\ и файл \css\font-awesome.css в папку \templates\ваш-шаблон\css

Откроем файл \templates\ваш-шаблон\main.tpl.php в строку 15 или 16 вставим:

<?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.css"); ?>

Получиться что то вроде этого:

<?php $this->addMainCSS("templates/{$this->name}/css/theme-content.css"); ?>
<?php $this->addMainCSS("templates/{$this->name}/css/theme-modal.css"); ?>
<?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.css"); ?>
<?php $this->addMainJS("templates/{$this->name}/js/jquery.js"); ?>

Вот и всё. Теперь вы можете использовать иконки, везде где захотите...

Например при добавление статьи на редакторе, переключитесь в режим Исходного HTML кода и пишите там

<i class="fa fa-music"></i>

В результате вы получите иконку Музыки, т.е. fa fa- это префикс, а music это название иконки. Полный список всех иконок посмотрите Здесь