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

Используем иконки 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

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