Подключение иконочного шрифта в Joomla 3.3.x

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine

В прошлой статье мы воспользовались сервисом генератором иконочных шрифтов 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" />

но, эти строки годятся для подключения стилей только в шаблон BEEZ3. Если вы добавите эти же строки в другой шаблон, то стили не будут подключены, даже после того как вы их туда скопируете. Все дело в том что в этих строках автоматически определяется только корень сайта, а вот какой шаблон выбран в системе, эти строки не учитывают.

Более универсальные строки которые стоит прописать в теге <HEAD> выглядят как показано ниже и обязательно должны идти после строки, содержащей конструкцию "$doc = JFactory::getDocument();" :

если вы создаете новый шаблон то обязательно перед вставкой, приведенного выше кода, обязательно укажите конструкцию "$doc = JFactory::getDocument();" если она у вас отсутствует.

Стили подключены и могут быть использованы у нас на сайте.

Попробуем это сделать на простой статье. Я открыл первую попавшуюся статью и давил в нее один параграф, одну ссылку, и один список с пятью элементами.

вид в редакторе

02-testoviy-text

вид на сайте

03-testoviy-text-na-sayte

Давайте вспомним какие иконки находятся в нашем шрифте и какие классы для их вызова прописаны в файлах стилей.

04-imena-vizova-ikonok

Теперь для того чтобы отобразить наши иконки, нам нужно перейти в нашем редакторе к виду html

05-viklyuchaem-redactor

и добавим нужным элементам в коде html необходимые классы. В результате у меня получился вот такой код:

а результат после сохранения на сайте стал выглядеть вот так:

06-resultat-site

Но согласитесь что такой метод добавления иконок в редакторе не совсем удобен и было удобнее просто выделить нужный элемент и выбрать для него иконку непосредственно из списка доступных. Давайте сделаем что-то подобное:

Перейдем в нашем шаблоне в папку стилей \templates\beez3\css и найдем там файл с именем editor.css. если в Вашем шаблоне такого файла нет, то его стоит создать.

Создаем и открываем для редактирования файл editor.css.

Добавляем в созданный файл все классы иконок, которые мы добавили в шрифт при его генерации. В нашем случае добавляемый код будет выглядеть вот так:

в результате в редакторе после обновления страницы получаем возможность нужному элементу задать иконку. Для это выделяем этот элемент, и в верхнем меню редактора кликаем по кнопке "Формат", в выпадающем списке наводим курсор на пункт "Формат" и в выпадающем списке получаем возможность выбрать нужную иконку. Единственное что Вам нужно будет ориентироваться среди доступных стилей по памяти.

07-vybiraem-iconku

Если хотите чтобы иконки было видно после применения сразу в редакторе, то шрифт иконок так же придется подключить и в шаблоне админки Joomla.

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (1 оценок, в среднем: 5,00 из 5)
Загрузка...