иконки на сайт

Используем иконки Font Awesome без плагина

Здравствуйте, сегодня будет подключать шрифт Font Awesome (набор иконок) к сайту на wordpress вручную (без плагина), а также расскажу как их использовать на сайте, например, в меню сайта без плагина.


Скачать исходники для статьи можно ниже

Официальный сайт шрифта с множеством иконок:
«fontawesome.io»

fontawesome иконки

Здесь можно скачать zip архив иконок и потом подключить его к сайту или же можно подключится к ним через ссылку на них.

1. Подключение шрифта иконок Font Awesome без плагина

1.1. Через внешнюю ссылку на шрифт:

Для этого заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Редакторы», справа в списке файлов ищем — functions.php и добавляем в него следующий код:

//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

fontawesome2

Последняя версия шрифта иконок — 4.7.0, как только выйдет новая версия можете просто поменять цифры в коде на нужную версию.

1.2. Файлы шрифта находятся на вашем сайте (без внешней ссылки).

Здесь нужно загрузить zip архив шрифта с сайта «fontawesome.io»:

fontawesome иконки

Жмем на кнопку Download и загружаем архив.

Распаковываем zip архив, в нем нам понадобится только две папки: css и fonts:

fontawesome7

, и загружаем их через FTP клиент (бесплатный FileZilla или Total Commander) на сервер сайта.

Давайте создадим в папке темы сайта (для примера, если на сайте тема —
Twenty Twelve, то путь к папке темы будет следующий: «http://site.ru/wp-content/themes/twentytwelve/») новую папку — fontawesome:

fontawesome6

В неё и закинем наши две папочки (css и fonts):

fontawesome8

После этого заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Редакторы», справа в списке файлов ищем — functions.php и добавляем в него следующий код:

function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

К сведению: get_stylesheet_directory_uri() — получает URL текущей темы, не содержит слэша на конце. Учитывает дочернюю тему. Учитывает SSL. Например, если вы используете тему twentyten, то возвращаемый УРЛ не содержит слэша (/) на конце, а именно: «http://site.ru/wp-content/themes/twentyten»

Вышеуказанный код можно было бы записать и иначе (без использования get_stylesheet_directory_uri), вот так:

function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//gameforstreet.ru/wp-content/themes/twentytwelve/fontawesome/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Шрифт с иконками Font Awesome мы подключили без использования плагина!

2. Использование иконок Font Awesome на сайте.

2.1. Как вставлять иконки в записи/странички на сайте wordpress.

Посмотреть как выглядит каждая иконка можно здесь:

«fontawesome.io/icons/»

fontawesome9

Кликаете по понравившейся иконке и переходите на страничку, где расположен код иконки для вставки на сайт:

fontawesome10

Данный код нужно вставлять во вкладке «Текст» Редактора записей/страниц:

fontawesome11

2.2. Как вставить иконки в меню сайта на wordpress.

Заходим в админке, в пункт «Внешний вид», подпункт «Меню»:

fontawesome12

Выбираем «Произвольные ссылки», указываем url ссылки, а в «Текст ссылки» вставляем код иконки и название пункта меню:

fontawesome14

В данном примере поле «Текст ссылки» будет выглядеть так:

« Главная»

2.3. Другие примеры использования иконок можно посмотреть здесь:

«fontawesome.io/examples/»

fontawesome15

PS: Скачать zip архив шрифта иконок версии 4.7.0 — можно с моего сайта — здесь.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий