TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить Font Awesome в WordPress?

377

В настоящее время пользователи WordPress стремятся привнести больше визуального дизайна на свой сайт. В течение многих лет дизайнеры и разработчики полагались на свое воображение и исполнение, чтобы привнести визуальный дизайн на свой веб-сайт. Но как насчет обычных пользователей, у которых нет никаких знаний в области программирования или дизайна?

Font Awesome – ключ к их проблеме. Используя Font Awesome, вы можете добавлять значки в WordPress без каких-либо знаний в области программирования или дизайна.

В этой статье мы хотели бы обсудить добавление Font Awesome в WordPress.

Что такое Font Awesome?

Font Awesome – самый популярный плагин для добавления иконок шрифтов в WordPress. В настоящее время у него более 80 000 активных установок, и он совместим с последней версией WordPress. Font Awesome предлагает множество функций, например:

  • Поддерживает Font Awesome Free и Font Awesome Pro. (это премиум-версия)
  • Регулярно обновляется.
  • Легко настраивается
  • и т.п.

Как добавить Font Awesome в WordPress с помощью плагина?

Как упоминалось выше, Font Awesome имеет множество преимуществ, и практически необходимо иметь хорошо разработанный веб-сайт. Есть много способов добавить Font Awesome в WordPress.

Как всегда, самый простой способ сделать это – использовать плагин. Чтобы добавить Font Awesome в WordPress, выполните следующие действия:

  1. Перейдите в свою панель управления WordPress.
  2. Наведите указатель мыши на плагины и нажмите «Добавить».

Как добавить Font Awesome в WordPress?

  1. В поле поиска введите «font awesome» и нажмите клавишу ВВОД.
  2. Нажмите «Установить сейчас», а затем «Активировать».

Как добавить Font Awesome в WordPress?

Это все, что вам нужно сделать. Вы также можете установить плагин, используя файл .zip.

Что такое значок шрифта? Почему мы должны добавить это в WordPress?

В течение многих лет разработчики и дизайнеры полагались на разработку и воплощение своих идей в виде изображений на своих веб-сайтах. Однако с развитием иконок шрифтов мир визуального дизайна упростился. Значки шрифтов являются адаптивными и полностью настраиваемыми значками, которые в некоторых случаях заменяют традиционные изображения или спрайт-листы.

Как вы, наверное, понимаете по названию, иконки шрифтов – это именно то, что вы думаете. Этот шрифт полностью состоит из иконок. Например, в обычном шрифте используются обычные символы. Однако значок шрифта заменяет символы другими символами. Например, если вы нажмете «a» на клавиатуре, отобразится дом.

Вопрос, который до сих пор остается без ответа, – зачем нам использовать иконки шрифтов? Как упоминалось выше, изображения были нашим инструментом номер 1 в течение многих лет. Однако значки шрифтов дают нам гибкость, которой у нас не было с изображениями. Они просты в использовании и очень отзывчивы.

Как добавить Font Awesome в WordPress?

Иконки шрифтов – это векторные изображения, которые можно масштабировать до любого размера без потери качества. Как упоминалось выше, значками шрифтов можно управлять так же, как и обычными повседневными шрифтами, которые мы используем. Вы можете изменить цвета, выравнивание, высоту, стиль и т.д.

Иконки шрифтов совместимы практически со всеми браузерами. Таким образом, вам не следует беспокоиться о том, что некоторые браузеры не могут отображать значки шрифтов, которые вы используете в WordPress.

Существуют тысячи значков шрифтов, которые ограничивают использование изображений на наших веб-сайтах. Хотя обратная сторона иконок шрифтов – это совместимость с платформой. Браузеры отображают эти шрифты, и часто они работают и отображаются по-разному в разных операционных системах.

Добавление Font Awesome в WordPress вручную

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

Как создать дочернюю тему в WordPress?

Как упоминалось выше, наличие дочерней темы может быть очень полезным. Чтобы создать дочернюю тему, выполните следующие действия:

  1. Из public_html перейдите в wp-content> themes
  2. Создайте новую папку и используйте имя вашей темы, но добавьте в конце «-child»
  3. Откройте только что созданную папку. Создайте новый файл и назовите его style.css
  4. Создайте новый файл и назовите его functions.php
  5. Перейдите в панель управления WordPress> Внешний вид и активируйте новую тему, которую вы создали.
  6. Вернитесь в панель управления WordPress> Внешний вид> Редактор тем и выберите созданную вами дочернюю тему.
  7. Скопируйте и вставьте приведенный ниже код в файл functions.php.
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
  • Нажмите «Обновить», и все готово.

Как вручную добавить Font Awesome в WordPress?

Мы говорили о добавлении Font Awesome в WordPress с помощью плагина. Теперь давайте поднимем его на ступеньку выше и вручную добавим в WordPress. Как всегда, прежде чем вносить какие-либо изменения, мы рекомендуем сделать резервную копию WordPress на случай, если что-то пойдет не так.

Есть два метода добавления Font Awesome в WordPress вручную:

  1. Скачав файл functions.php и добавив код.
  2. Отредактировав файл functions.php из панели управления WordPress.

Подключитесь к своему сайту с помощью FTP-клиента или прямо с панели хостинга. Найдите файл functions.php в папке активированной темы. Загрузите его на свой рабочий стол и откройте с помощью Notepad ++ или любого другого редактора, который вам нравится.

Затем, чтобы использовать бесплатный сервер CDN, используйте следующий код:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' ); function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); } Or you can directly add the Font Awesome to your CSS and create a new function with the following code: //enqueues our locally supplied font awesome stylesheet function enqueue_our_required_stylesheets(){ wp_enqueue_style('font-awesome', get_stylesheet_directory_uri(). '/css/font-awesome.css'); } add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Сохраните его и загрузите обратно в папку, из которой вы его скачали.

Вы также можете получить доступ к function.php через свою панель управления. Перейдите в Внешний вид> Редактор тем> Активированная тема> functions.php

Как добавить Font Awesome в WordPress?

Теперь, когда вы вручную добавили Font Awesome в WordPress, просто перейдите на сайт поиска значков Awesome и найдите значок, который вы ищете. Найдя значок, щелкните по нему.

После этого вы получите код для выбранного значка. Все, что вам нужно сделать, это скопировать и вставить код в текстовую вкладку редактора WordPress.

Как добавить Font Awesome в WordPress?

Как изменить отличный стиль шрифта с помощью CSS?

Font Awesome с годами приобрел большую популярность благодаря своей простоте и гибкости. Большинство дизайнеров перестали использовать традиционные изображения и заменили их значками Font Awesome.

Есть много возможных, но простых изменений, которые вы можете внести в значки Font Awesome. Например, вы можете изменить размер значков, повернуть их, изменить цвет и т.д.

Начнем с примера и подробного объяснения каждого из них. Хотя мы научим вас только основам, чтобы найти более сложные модификации, вам нужно проводить больше времени с Font Awesome и воплощать свое воображение.

Как изменить размер иконок Font Awesome?

Самая основная модификация – это изменение размера значка Font Awesome. По умолчанию, когда вы получаете код значка с официального веб-сайта Font Awesome, значки довольно маленькие, и вам может потребоваться изменить их в соответствии с вашими потребностями. Чтобы увеличить размер, используйте следующий код:

  • fa-lg – увеличить размер на 33%
  • fa-2x – увеличить размер вдвое
  • fa-3x – утроить размер
  • и так далее.

Вот пример кода выше. Здесь мы утроили иконку загрузки:

<i class="fa fa-download fa-3x" aria-hidden="true"></i>

Как вы, наверное, заметили, мы утроили размер значка загрузки.

Как изменить размер иконок Font Awesome? Иконки Font Awesome можно поворачивать под разными углами. Этого легко добиться, используя следующий код, соответствующий вашим потребностям. Используйте тот же метод, что и упомянутый выше, но вместо кода изменения размера используйте следующий код:

  • fa-rotate-90 – повернуть иконку на 90 градусов
  • fa-rotate-180 – повернуть иконку на 180 градусов
  • fa-rotate-270 – для поворота значка на 270 градусов
  • fa-flip-horizontal – перевернуть значок по горизонтальной оси
  • fa-flip-vertical – перевернуть значок по вертикальной оси

Как добавить анимацию в иконки Font Awesome?

Как упоминалось выше, Font Awesome очень гибок, поэтому с помощью приведенного ниже кода вы можете добавить очень простую анимацию к значкам Font Awesome.

  • fa-spin – добавить вращение вращения
  • fa-pulse – для поворота значка в 8 различных шагов

Как изменить цвет иконок Font Awesome?

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

.fa-download { color: green; }

Как добавить Font Awesome в WordPress?

Дополнительный CSS доступен через Внешний вид> Настройщик.

Как вручную добавить Font Awesome в элементы CSS?

Как вы знаете в CSS, каждый код что-то представляет. В Font Awesome каждый код представляет собой значок; и каждый значок имеет уникальный код. С технической точки зрения это известно как Unicode. Он сообщает браузеру, что отображать и как это отображать.

Вам нужно создать уникальный псевдоэлемент и настроить его шрифт для использования вашего семейства значков шрифтов. Затем вы можете установить значение его содержимого. Для этого вам понадобятся:

  • содержание
  • семейство шрифтов

В приведенном ниже примере будет создана кнопка:

<!-- Here is the styling --> <style> .my-button{ display: inline-block; padding: 8px 12px; background: #eee; border: solid 1px #D5D5D5; } .my-button span{ display: inline-block; } .my-button span:before{ font-family: 'FontAwesome'; content: 'f085'; position: relative; margin-right: 5px; font-size: 110%; } </style> <!-- Here is the HTML markup --> <div class="my-button"> <span class="text"> Settings Menu </span> </div>

Результат будет выглядеть так:

Как добавить Font Awesome в WordPress?

Как использовать иконки Font Awesome с сервера CDN?

Выше мы упоминали, как вручную использовать CDN для Font Awesome. Просто скопируйте и вставьте код в файл functions.php вашей активированной темы.

Однако лучше, если вы сделаете это с детской темой, а не с реальной темой. Потому что, если вы обновите WordPress и тему, вам придется переделывать весь процесс.

Используя премиум-версию Font Awesome, вы получите доступ к Font Awesome CDN и сможете напрямую получать значки с веб-сайта и использовать их на своем собственном веб-сайте. Цена на премиум-версию – 99 долларов в год.

Как использовать Font Awesome в Elementor?

Elementor – один из самых известных конструкторов страниц во всемирной паутине, и у него много функций, которых нет в обычном редакторе WordPress.

Конструктор страниц Elementor, наряду со многими другими полезными функциями, уже поставляется с иконками Font Awesome. Таким образом, нет необходимости устанавливать какие-либо дополнительные плагины или редактировать файлы ядра вашей темы.

Чтобы получить доступ к значкам Font Awesome, просто используйте виджет значков. Затем перетащите его на страницу.

Кроме того, Font Awesome доступен в виджетах Icon Box и Icon List. Эти виджеты чрезвычайно полезны и могут использоваться в различных сценариях, особенно если у вас нет знаний в области программирования.

Как добавить Font Awesome в WordPress?

Удивительный Лучше шрифт плагин является еще и еще более популярным Удивительный плагин шрифта, используемый в WordPress сообщества. Удивительный шрифт плагин очень полезный плагин. Тем не менее, это связано со многими проблемами, включая:

  • Конфликты с другими плагинами
  • Определенные проблемы с кешированием

Это может вызвать множество проблем для веб-сайтов с множеством установленных плагинов и веб-сайтов, которые регулярно обновляются. С другой стороны, плагин Better Font Awesome разработан для работы с шорткодами, созданными с помощью Font Awesome Icons, Font Awesome More Icons и Font Awesome Shortcodes.

Источник записи: https://betterstudio.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее