fontawesome — шрифты иконки для сайта

Несколько причин использовать эту библиотеку

• Избавитесь от тяжёловесных картинок которые размываются после редактирования (особенно в gimp`е) да ещё и трата времени на поиск и редактирование.
• Единый стиль оформления. Вряд ли найдётся коллекция которая удовлетворит все ваши требования и будет оформлена под единый стандарт.

Представляю вам выход, большая коллекция бесплатных и платных иконок в формате шрифтов и векторной графики (.eot .svg .ttf .woff .woff2)

 

Официальный сайт fontawesome

 

Установка:

1. Скачиваем архив с сайта. Распаковываем смотрим в папку. Я выбрал «on-server» предварительно переименовав папку что бы знать версию библиотеки.

Затем я захоже в FTP клиент. Всегда пользовался FileZilla. ищу путь куда я загружал прошлую библиотеку у меня это

/wp-content/themes/objectone/fontawesome-free-5.0.6-on-server/webfonts

 

2. Закидываю несколько папок на сервер

sprites и js я удалил. Мне нужны только иконки. Там много лишних файлов но я ленивый и не стал их зачищать css и webfonts и тестировать какие из них прям жизненно необходимы.

 

3. В шаблоне wordpress «Функции темы (functions.php)» редактирую ранее созданную строку:

wp_enqueue_style('font-awesome', get_template_directory_uri().'/fontawesome-free-5.0.6-on-server/css/fontawesome-all.min.css');

Все библиотеки в WordPress желательно (но необязательно) загружать в этот блок

/* Сюда загружаем скрипты и стили */
function load_style_script(){ /* имена должны быть оригинальными, может выдать ошибку */
wp_enqueue_style('font-awesome', get_template_directory_uri().'/fontawesome-free-5.0.6-on-server/css/fontawesome-all.min.css');
}

 

4. Затем я захожу в шаблон «Подвал (footer.php)» или на любую вашу статью для редактирования. И вставляете код для проверки работоспособности библиотеки.

Со шрифтом в html вы и сами знаете что можно сделать, например такое:

История смайлика Awesome

Возможно вам подойдёт не богатый на разнообразие иконок аналог fontawesome встроенный в WordPress это dashicons.

| Категория: CSS
| Тэги: CSS