Иконки для сайта

Иконки для сайта
27 Сен

Бесплатные иконки для сайта

Всем привет, друзья! Наверное каждый, кто когда-нибудь создавал свой сайт на WordPress сталкивался с маленькой проблемой в виде старых версий иконок. Было дело? Уверен, было. Я столкнулся с этой проблемой когда только делал этот блог. Я нашел подходящий шаблон для своего будущего блога на “забугорных просторах”. Установил, перевел на русский и начал колдовать. И в процессе переделки шаблона на свой лад, я столкнулся с проблемой. Данный шаблон поддерживал старые иконки для сайта, а они мне честно говоря, уже надоели. Поэтому я принял решение подключить на свой блог последнюю версию иконок. При этом не просто подключить новую параллельно старой, а отключить встроенную и подключить свою. Этим сейчас и займемся. Итак, что нам для этого понадобиться?

 

  • Скачать пакет с последней версией иконок на компьютер
  • Залить файлы в директорию сайта
  • Отключить встроенную поддержку старых иконок
  • Подключить свой обновленный пакет

 

Вы можете спросить зачем столько манипуляций? Можно же просто подключить иконки через специальный тег и не лохматить бабушку… Можно! Но каждое подключение через тег к серверу сайта иконок это драгоценное время простоя. В наше время быстрый сайт = успешный сайт. Если же вы не хотите замарачиваться, то вот код который нужно подключить перед закрывающим тегом </head> в файле header.php вашей темы:

 

Скачиваем пакет иконок Font Awesome

Первым делом нам нужно скачать пакет иконок с официального сайта Font Awesome. Для этого переходим по этой ссылке и попадаем на страницу со всем необходимым для подключения. Не пугайтесь если не знаете английский, я покажу куда “тыкнуть”. Выглядит страница вот так:

После того, как зашли на эту страницу, ничего не нажимая прокручиваете страницу вниз до блоков показанных на скрине:

На скрине выше я отметил красными стрелочками куда надо нажать, чтобы скачать архив с иконками последней версии. Думаю, промахнуться тут трудно. Скачиваете архив и распаковываете в любое удобное для вас место. Я обычно распаковываю на рабочий стол, чтобы удобно было потом найти.

Теперь эту папку переименовываем с fontawesome-free-5.3.1-web на просто fontawesome. Так нам будет проще её подключать к сайту. Всё, папку подготовили теперь переходим к следующему шагу.

 

Загружаем пакет иконок на сайт

Открываем директорию вашего сайта. Там где находятся папки wp-admin, wp-content, wp-includes и рядышком с ними вставляете нашу папку fontawesome. Если у вас сайт уже на хостинге залейте папку в эту же директорию через FTP клиент, например FileZilla. Если только присматриваете себе хостера, советую попробовать , на котором находятся абсолютно все мои проекты на сегодняшний день. По соотношению цена-качество, лучшего в Казахстане вы не найдете, уж поверьте мне на слово.

 

Отключаем встроенную в WordPress поддержку иконок

Для того, чтобы отключить встроенную поддержку полностью, нам нужно будет поковырять маленько код. Не пугайтесь, всё довольно просто. Справится каждый. Если всё же возникнут трудности, спросите в комментариях, я обязательно помогу. Итак, для начала нам нужно создать небольшой плагин, чтобы в него уже помещать все будущие хаки. Я не советую вставлять коды в файл functions.php категорически. Так делать крайне не желательно и причин этому просто море. Одна из причин, это обновление темы. Как только тема обновиться все ваши хаки и коды перезапишутся, а точнее сотрутся.

Поэтому советую создать мини-плагин и все коды “сувать” туда. Как создать мини-плагин я рассказывал в статье Как создать свой плагин. Следующий код нужно поместить в созданный вами плагин или в файл functions.php (но я против!). Это отключит базовую поддержку старых иконок по умолчанию. У вас могут быть подключены файлы стилей с другими именами, если нашли, просто допишите в эту функцию ещё строчки. По крайней мере в большинстве случаев отключит. Код следующий:

Далее переходим в директорию нашей темы и ищем папку с названием fonts. Удаляем в ней все файлы со словом fontawesome. Если других файлов кроме этих нет, можно удалить полностью эту папку. Это мы делаем для того, чтобы иконки брались только из нашего обновленного архива и ниоткуда больше.

 

Подключаем обновленную версию иконок Font Awesome к сайту

Далее нам нужно подключить свою версию иконок. Для этого в файле вашей темы ищем файл header.php и в нем, перед закрывающим тегом </head> вставляем следующий код ничего в нем не меняя:

Поздравляю! Вы подключили самые новые иконки для сайта. А пользоваться ими проще простого. Выбираете на официальном сайте понравившуюся иконку нажимаете на нее и копируете код для вставки на свой сайт. Эти иконки умеют масштабироваться, менять цвет, поворачиваться, группироваться из нескольких в одну, анимироваться и многое другое. Всё зависит только от вашей фантазии. Кстати говоря, не нужно исправлять старые коды на новые, новый пакет поддерживает старые имена.

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


Рекомендую почитать


  
Собери фразу или афоризм из 5 частей в течение месяца и получи 100 рублей. Условия конкурса можно узнать на этой странице. Третья часть - остановка сердца, (сохраните её)

Оставить комментарий

avatar
1000
  Подписаться  
Уведомление о