В прошлой статье мы воспользовались сервисом генератором иконочных шрифтов Fontello, сгенерировали, скачали и подключили скачанный шрифт к простой html-страничке. В этой статье я расскажу как подключить полученный шрифт к сайту Joomla 3, а так же как его удобно применять в ваших статьях на сайте.
Настоятельно рекомендую ознакомиться с прошлой статьей и только приступать к изучению этого материала.
Ознакомились? Это хорошо, так как понадобиться тот архив шрифтов, который Вы создали, следуя инструкциям. Впрочем, у вас может быть уже заготовленный иконочный шрифт...
Теперь пора приступить к подключению иконочного шрифта к нашему сайту на Joomla 3.
Для примера я взял чистую Joomla 3.4.1 со стандартным набором шаблонов и включил шаблон по умолчанию Beez3.
ШАГ 1. Копирование файлов стилей и шрифтов в папку шаблона.
Как мы помним наш архив содержит следующий набор файлов и папок:
Открываем в FTP-менеджере папку действующего шаблона \templates\beez3\
Создаем в ней папку, например "ourfonts" и копируем туда папочки CSS и FONT из нашего архива. Можно было конечно копировать файлы стилей в папку со стилями шаблона, а папку со шрифтами копировать в корень шаблона, но так в случае надобности будет сложнее удалить последствия наших действий, потому копируем в специально созданную нами новую папочку "ourfonts".
ШАГ 2. Подключаем наши новые стили к шаблону нашего сайта.
Это можно сделать двумя способами.
Первый способ это просто добавить следующие строки в тег <HEAD> после строки <jdoc:include type="head" />
|
1 2 3 4 5 6 7 |
<jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/animation.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/fontello.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/fontello-codes.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/fontello-embedded.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/fontello-ie7.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez3/ourfonts/css/fontello-ie7-codes.css" type="text/css" /> |
но, эти строки годятся для подключения стилей только в шаблон BEEZ3. Если вы добавите эти же строки в другой шаблон, то стили не будут подключены, даже после того как вы их туда скопируете. Все дело в том что в этих строках автоматически определяется только корень сайта, а вот какой шаблон выбран в системе, эти строки не учитывают.
Более универсальные строки которые стоит прописать в теге <HEAD> выглядят как показано ниже и обязательно должны идти после строки, содержащей конструкцию "$doc = JFactory::getDocument();" :
|
1 2 3 4 5 6 7 |
$doc = JFactory::getDocument(); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/animation.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/fontello.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/fontello-codes.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/fontello-embedded.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/fontello-ie7.css', $type = 'text/css', $media = 'screen,projection'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/ourfonts/css/fontello-ie7-codes.css', $type = 'text/css', $media = 'screen,projection'); |
если вы создаете новый шаблон то обязательно перед вставкой, приведенного выше кода, обязательно укажите конструкцию "$doc = JFactory::getDocument();" если она у вас отсутствует.
Стили подключены и могут быть использованы у нас на сайте.
Попробуем это сделать на простой статье. Я открыл первую попавшуюся статью и давил в нее один параграф, одну ссылку, и один список с пятью элементами.
вид в редакторе
вид на сайте
Давайте вспомним какие иконки находятся в нашем шрифте и какие классы для их вызова прописаны в файлах стилей.
Теперь для того чтобы отобразить наши иконки, нам нужно перейти в нашем редакторе к виду html
и добавим нужным элементам в коде html необходимые классы. В результате у меня получился вот такой код:
|
1 2 3 4 5 6 7 8 9 |
<p class="icon-lock">Первая простая строка</p> <p><a class="icon-link-ext" href="#">Строка ссылка</a></p> <ul> <li class="icon-heart">элемент списка 1</li> <li class="icon-plus-circled">элемент списка 2</li> <li class="icon-eye">элемент списка 3</li> <li class="icon-reply">элемент списка 4</li> <li class="icon-mail-alt">элемент списка 5</li> </ul> |
а результат после сохранения на сайте стал выглядеть вот так:
Но согласитесь что такой метод добавления иконок в редакторе не совсем удобен и было удобнее просто выделить нужный элемент и выбрать для него иконку непосредственно из списка доступных. Давайте сделаем что-то подобное:
Перейдем в нашем шаблоне в папку стилей \templates\beez3\css и найдем там файл с именем editor.css. если в Вашем шаблоне такого файла нет, то его стоит создать.
Создаем и открываем для редактирования файл editor.css.
Добавляем в созданный файл все классы иконок, которые мы добавили в шрифт при его генерации. В нашем случае добавляемый код будет выглядеть вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.icon-mail-alt{} .icon-mail-squared{} .icon-help-circled{} .icon-heart{} .icon-ok-circled{} .icon-ok-circled2{} .icon-link-ext{} .icon-unlink{} .icon-link{} .icon-cancel-circled{} .icon-cancel-circled2{} .icon-plus{} .icon-plus-circled{} .icon-plus-squared{} .icon-plus-squared-alt{} .icon-minus{} .icon-lock{} .icon-lock-open{} .icon-lock-open-alt{} .icon-pin{} .icon-eye{} .icon-eye-off{} .icon-tag{} .icon-upload-cloud{} .icon-reply{} .icon-reply-all{} .icon-forward{} .icon-quote-left{} .icon-quote-right{} .icon-code{} |
в результате в редакторе после обновления страницы получаем возможность нужному элементу задать иконку. Для это выделяем этот элемент, и в верхнем меню редактора кликаем по кнопке "Формат", в выпадающем списке наводим курсор на пункт "Формат" и в выпадающем списке получаем возможность выбрать нужную иконку. Единственное что Вам нужно будет ориентироваться среди доступных стилей по памяти.
Если хотите чтобы иконки было видно после применения сразу в редакторе, то шрифт иконок так же придется подключить и в шаблоне админки Joomla.
Загрузка...