РЕКЛАМА

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

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

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

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

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

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

 

 

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

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

 

Подключение 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> вставляем следующий код ничего в нем не меняя:

 

Файл header.php

 

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

 

Код иконки Font Awesome

 

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


Участвуй в конкурсе для подписчиков! Условия придут на е-майл


Последние 7 записей на блоге:
06.10.2018

Монетизация сайта с посещением от 1 < посетителей Всем привет, ребят! Скорее всего, если вы попали каким-то образом на эту страницу, значит у вас есть сайт и вы хотите на нем заработать. Я прав? Если…

0
27.09.2018

Бесплатные иконки для сайта Всем привет, друзья! Наверное каждый, кто когда-нибудь создавал свой сайт на WordPress сталкивался с маленькой проблемой в виде старых версий иконок. Было дело? Уверен, было. Я столкнулся с этой проблемой когда…

0
15.09.2018

Грамотная защита от копитастеров Всем читателям, привет! Каждый начинающий вебмастер, рано или поздно находит свой текст или картинки на других сайтах. И честно говоря, лично меня это раздражало жутко. И в эти моменты я решил,…

0
30.08.2018

Заработок на Cashback Привет ребят. Сегодня хочу поделиться одним полезным сервисом для тех, кто покупает всякие штуки в Китае. На сегодняшний день площадка Алиэкспресс набрала такие гиганские обороты, что с ума можно сойти. Каждый второй…

0
01.08.2018

Программа для продвижения Инстаграм Всем привет, ребят. Сегодня будет необычный пост для этого блога. Хочу с вами поделиться отличной находкой. А именно программой для продвижения инстаграм аккаунта. Сразу поясню, что это не одна из этих…

0
23.06.2018

Что нужно знать для создания сайтов Всем привет! Наверняка вы все не раз слышали высказывания, что создать красивый, функциональный и приносящий прибыль сайт можно даже не зная языков программирования с помощью CMS? Об этом трезвонит…

0
13.04.2018

Как заработать в интернете, в Казахстане и не только Каждый человек в возрасте от 12 до 60 лет, хоть раз, но задавался вопросом — как заработать в интернете? И это не удивительно, ведь на каждом…

0

Понравилась статья? Поделись ею:
0

РЕКЛАМА

Автор блога

АндрейWPM

Спасибо за доверие! Я очень ценю ваше присутствие здесь.

Прокомментируйте первым

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

Ваш e-mail не будет опубликован.


*

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля