Категория:

Опубликовано:

09.08.2015 - 13:58

Как подключить Font Awesome к теме Drupal

Font Awesome уже используется, практически, как стандарт для добавления иконок на сайт.

Оно и не удивительно, ведь это дает, простоту и практичность в использовании, а главное скорость и полную кроссбраузерность.

Я уже рассказывал о том как использовать Font Awesome с помощью псевдоклассов ::before и ::after в одном из предыдущих постов, и сейчас рассмотрим несколько способов подключения этой замечательной библиотеки шрифтов к нашему сайту.

Обратите внимание, что некоторые из тем поддерживают Font Awesome уже из коробки, по этому проверьте тему перед добавлением.

Скачать актуальную версию шрифта можно бесплатно, с официальной странички Font Awesome. Или можно добавить из одного из CDN.

На момент написания поста известны следующие CDN:

Не забывайте что используя сторонний CDN Вы рискуете потерять шрифт, если на сервере произведут изменения, или просто откажутся от хранения этого шрифта. Я всегда стараюсь использовать локальное хранилище для всевозможных библиотек, если позволяют ресурсы сайта, и Вам рекомендую.

Ok. Переходим к раскрытию основной темы.

Подключение с помощью модуля

Конечно же есть для Drupal специальный модуль, который в несколько кликов сделает все за Вас :) Имя ему Font Awesome Icons.

Для использования качаем и устанавливаем. Все стандартно, установка в папку sites/all/modules, включение на странице admin/modules.

Среди зависимостей модуля есть Libraries, если у Вас он еще не установлен - следует это сделать.

После включения модуля Libraries нужно перейти на страничку нашего шрифта и скачать его. Содержимое архива нужно извлечь в папку sites/all/libraries/ и переименовать папку с версией шрифта в fontawesome (должен получится исправный путь sites/all/libraries/fontawesome/css/font-awesome.min.css).

Собственно все, теперь можно пользоваться всеми прелестями Font Awesome.

Подключение к теме или модулю Drupal

Если Вы не любитель использования дополнительных модулей, или же хотите разобраться в системе и сделать все самостоятельно - вот как это можно сделать:

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

Равноценно в каждом из способов нам нужен будет сам файл, который мы подключаем. У нас это шрифт Font Awesome.

Качаем архив с официальной странички, если этого еще не сделали. Открываем архив и извлекаем его. Получившуюся папку переименовываем в fontawesome.

Вариант 1. Добавляем стиль в тему сайта

Для этого, переходим в папку нашей темы (sites/all/theme/[имя темы]). Создаем директорию fonts, и заливаем туда нашу папку fontawesome.

Далее, в корне темы должен быть файл [имя темы].info, откроем его в редакторе.

Там видим картину примерно следующего содержания:

name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

Строки типа stylesheets[all][] = css/layout.css - это и есть подключенные стили. Поэтому, копируем верхнюю строку и меняем путь к нашему файлу font-awesome.min.css, а именно, указываем адрес fonts/fontawesome/css/font-awesome.min.css. Должно получится следующее:

name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = fonts/fontawesome/css/font-awesome.min.css
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

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

После подключения (!обязательно) чистим кеш (на странице admin/config/development/performance), и проверяем подключился ли файл, например посмотрев исходный код страницы в браузере (Ctrl + U), или с помощью расширений типа FireBug.

Если все корректно подключиено - можно приступать к использованию иконок.

Вариант 2. Используем Preprocess функцию

Рассмотрим вариант с добавлением в template.php, находящейся так же в корне Вашей темы.

Добавим следующий код:

function THEMENAME_preprocess_html(&$variables) {
  drupal_add_css(path_to_theme() . '/fonts/fontawesome/css/font-awesome.min.css');
}

Главное прописать функцию до выполнения template_process_html(). Так же не забываем поменять THEMENAME на машинное имя своей темы!

Можно использовать в своем модуле:

function MODULENAME_preprocess_html(&$variables) {
  drupal_add_css(drupal_get_path('module', 'MODULENAME') . '/fonts/fontawesome/css/font-awesome.min.css');
}

В этом случае папочку fonts нужно расположить в корне модуля. Вместо MODULENAME пишем машинное имя модуля.

Опять же чистим кеш и проверяем подключение.

Детальнее о способах подключения своих файлов к Drupal будет рассказано в отдельной статье.

Как использовать иконки Font Awesome

Итак, мы подключили библиотеку Font Awesome к сайту, и теперь можем насладится этим шрифтом в полной мере.

Найти нужную нам иконку можно с легкостью на страничке проекта:

Переходим на страницу нужной иконки и копируем её код с классом:

Скопированный код иконки, в формате вставляем в нужное место в шаблоне темы.

Так же Вы можете прочитать о том как использовать шрифт Font Awesome с помощью псевдоклассов ::before и ::after для уже имеющихся элементов на странице.

Собственно все.
Если есть вопросы или замечания - пишите в комментариях.

Теги:

Font Awesome

Иконки