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

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

Подключить 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 это название иконки. Полный список всех иконок посмотрите Здесь

Нравится
Не нравится
RSS
7VAV
00:58
Подскажите как эти иконки использовать в меню действия InstantCMS2?
00:13
Подскажите как прикрутить иконки fontawesome к меню действий. У меня сам awesom к сайту подключен, в обычное меню прописать иконки из админки проблем нет, а вот как к меню действий их прикрутить? Если можно пример кода бы глянуть хотя бы на примере одного пункта
13:14
Сложно прикрутить, так как меню действий генерируется в самой странице сайте. Например: \templates\default\controllers\content\item_view.tpl.php в строке 41 есть обращение к $this->addToolButton() так и добавляются пункты к меню действий. Что бы всем менять, придется много файлов изменить
Загрузка...

Новые комментарии

Без доработки кода не получиться это сделать
АлександрЛента событий 2 дня назад
Добрый день! Не подскажите как сделать Чтоб по умолчанию событие "Постить в стену" было включено т....
Обновите шаблон до 2.7
Здравствуйте! После установки шаблона проблема с биллингом - не выводятся системные сообщения "вам ...
Здравствуйте, на 2.9 еще не тестировал, чуть позже отвечу
Здравствуйте, сейчас при получение подарка, можно выводить в виде стикера на аватарке, на несколько ...
Возможно ли использование компонента, в виде выдачи наград: VIP-пользователь и т.п.? То есть чтобы п...
ИльяМультиязычность для InstanCMS 2.5 6 дней назад
2.9.0 что то не работает, идет прогрузка содержимого, во всех разделах и так ничего и не находит
ЮрийБесплатный шаблон для InstantCMS2 7 дней назад
Спасибо за ответ! Проблема решилась сама собой. Видимо, кэш мешал. Теперь проблема с добавлением фо...
Здравствуйте, не должна пропадать, можно ссылку на сайт?

Кошелек для оплаты

WebMoney: R380642925354 | Z170841179282

Яндекс деньги: 410012099984285

Qiwi: +79269354436

Счет сбербанк: 40817810640001679889

* если после оплаты товар не получили, проверьте папку Спам