Бесплатные иконки для сайта
Всем привет, друзья! Наверное каждый, кто когда-нибудь создавал свой сайт на WordPress сталкивался с маленькой проблемой в виде старых версий иконок. Было дело? Уверен, было. Я столкнулся с этой проблемой когда только делал этот блог. Я нашел подходящий шаблон для своего будущего блога на "забугорных просторах". Установил, перевел на русский и начал колдовать. И в процессе переделки шаблона на свой лад, я столкнулся с проблемой. Данный шаблон поддерживал старые иконки для сайта, а они мне честно говоря, уже надоели. Поэтому я принял решение подключить на свой блог последнюю версию иконок. При этом не просто подключить новую параллельно старой, а отключить встроенную и подключить свою. Этим сейчас и займемся. Итак, что нам для этого понадобиться?
- Скачать пакет с последней версией иконок на компьютер
- Залить файлы в директорию сайта
- Отключить встроенную поддержку старых иконок
- Подключить свой обновленный пакет
Вы можете спросить зачем столько манипуляций? Можно же просто подключить иконки через специальный тег и не лохматить бабушку... Можно! Но каждое подключение через тег к серверу сайта иконок это драгоценное время простоя. В наше время быстрый сайт = успешный сайт. Если же вы не хотите замарачиваться, то вот код который нужно подключить перед закрывающим тегом </head> в файле header.php вашей темы:
1<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Скачиваем пакет иконок Font Awesome
Первым делом нам нужно скачать пакет иконок с официального сайта Font Awesome. Для этого переходим по этой ссылке и попадаем на страницу со всем необходимым для подключения. Не пугайтесь если не знаете английский, я покажу куда "тыкнуть". Выглядит страница вот так:
После того, вас перенаправит на страницу скачивания. Вам нужно скачать архив нажав на синюю кнопку:
На скрине выше я отметил красной стрелочкой куда надо нажать, чтобы скачать архив с иконками последней версии. Думаю, промахнуться тут трудно. Скачиваете архив и распаковываете в любое удобное для вас место. Я обычно распаковываю на рабочий стол, чтобы удобно было потом найти.
Теперь эту папку переименовываем с fontawesome-free-5.3.1-web на просто fontawesome-free. Так нам будет проще её подключать к сайту. Всё, папку подготовили теперь переходим к следующему шагу.
Загружаем пакет иконок на сайт
Открываем директорию вашего сайта. Там где находятся папки wp-admin, wp-content, wp-includes и рядышком с ними вставляете нашу папку fontawesome. Если у вас сайт уже на хостинге залейте папку в эту же директорию через FTP клиент, например FileZilla. Если только присматриваете себе хостера, советую попробовать вот этот хостинг, на котором находятся абсолютно все мои проекты на сегодняшний день. По соотношению цена-качество, лучшего в Казахстане вы не найдете, уж поверьте мне на слово.
Отключаем встроенную в WordPress поддержку иконок
Для того, чтобы отключить встроенную поддержку полностью, нам нужно будет поковырять маленько код. Не пугайтесь, всё довольно просто. Справится каждый. Если всё же возникнут трудности, спросите в комментариях, я обязательно помогу. Итак, для начала нам нужно создать небольшой плагин, чтобы в него уже помещать все будущие хаки. Я не советую вставлять коды в файл functions.php категорически. Так делать крайне не желательно и причин этому просто море. Одна из причин, это обновление темы. Как только тема обновиться все ваши хаки и коды перезапишутся, а точнее сотрутся.
Поэтому советую создать мини-плагин и все коды "сувать" туда. Как создать мини-плагин я рассказывал в статье Как создать свой плагин. Следующий код нужно поместить в созданный вами плагин или в файл functions.php (но я против!). Это отключит базовую поддержку старых иконок по умолчанию. У вас могут быть подключены файлы стилей с другими именами, если нашли, просто допишите в эту функцию ещё строчки. По крайней мере в большинстве случаев отключит. Код следующий:
1234function remove_styles () {wp_deregister_style ('font-awesome');wp_deregister_style ('ваш-класс-стиля-font-awesome');}add_action ('wp_print_styles','remove_styles',100);
Далее переходим в директорию нашей темы и ищем папку с названием fonts. Удаляем в ней все файлы со словом fontawesome. Если других файлов кроме этих нет, можно удалить полностью эту папку. Это мы делаем для того, чтобы иконки брались только из нашего обновленного архива и ниоткуда больше. Внимание! Перед удалением, обязательно сделайте резервную копию папок, которые вы удаляете или изменяете.
Подключаем обновленную версию иконок Font Awesome к сайту
Далее нам нужно подключить свою версию иконок. Для этого в файле вашей темы ищем файл header.php и в нем, перед закрывающим тегом </head> вставляем следующий код ничего в нем не меняя:
1<link rel='stylesheet' href='/fontawesome/css/all.min.css' type='text/css' media='all' />
Поздравляю! Вы подключили самые новые иконки для сайта. А пользоваться ими проще простого. Выбираете на официальном сайте понравившуюся иконку нажимаете на нее и копируете код для вставки на свой сайт.
Эти иконки умеют масштабироваться, менять цвет, поворачиваться, группироваться из нескольких в одну, анимироваться и многое другое. Всё зависит только от вашей фантазии. Кстати говоря, не нужно исправлять старые коды на новые, новый пакет поддерживает старые имена.
На этом у меня всё. Если возникли вопросы не держите их в себе, выскажите их в комментариях к этой статье. И если ещё не подписались на мою рассылку, быстрее подписывайтесь. Я скоро планирую проводить денежные конкурсы на блоге, так что у вас есть возможность быть в числе первых, кто об этих конкурсах будет узнавать. До встречи в следующих статьях.
Источник: https://wpmaster.kz/ikonki-dlya-sajta/