Як легко додати значки шрифтів у вашій темі WordPress

Ви хочете додати шрифти значків на своєму сайті WordPress? Нещодавно один із наших читачів запитав, який найпростіший спосіб додати шрифти значків у тему WordPress?


Шрифти значків дозволяють додавати векторні (змінні) значки, не сповільнюючи веб-сайт. Вони завантажуються як веб-шрифти і можуть бути стилізовані за допомогою CSS.

У цій статті ми покажемо вам, як легко додавати шрифти значків у тему WordPress, крок за кроком.

Використання шрифтів значків з будь-якою темою WordPress

Що таке шрифти значків і для чого їх потрібно використовувати?

Шрифти значків містять символи або піктограми замість літер та цифр. Ці піктограми можна легко додати до вмісту веб-сайту та змінити розмір за допомогою CSS. У порівнянні з піктограмами на основі зображень піктограми шрифту набагато швидше, що допомагає у загальній швидкості веб-сайту WordPress.

Попередній перегляд шрифтів значків

Шрифти значків можна використовувати для відображення часто використовуваних значків. Наприклад, ви можете використовувати їх у кошику для покупок, кнопках завантаження, скриньках функцій, конкурсі на роздачу та навіть у навігаційних меню WordPress.

Доступно кілька безкоштовних та відкритих джерел шрифтів значків, у яких є сотні прекрасних значків.

Насправді кожна установка WordPress постачається з безкоштовним набором шрифтів значків дашиконів. Ці піктограми використовуються в меню адміністратора WordPress та інших областях всередині області адміністратора WordPress.

Деякі інші популярні шрифти значків:

  • Шрифт Awesome
  • Родослови
  • IcoMoon
  • Лінійні знаки
  • Матеріальні значки від Google
  • Проект іменника

Для цього підручника ми будемо використовувати Font Awesome. Це найпопулярніший доступний безкоштовний шрифт значка з відкритим кодом. Ми використовуємо FontAwesome на веб-сайті WPBeginner, а також наші плагіни WordPress, такі як OptinMonster, WPForms, RafflePress тощо.

У цьому посібнику ми розглянемо три способи додавання шрифтів значків у WordPress. Ви можете вибрати рішення, яке найкраще підходить для вас.

Додавання шрифтів значків у WordPress за допомогою плагінів

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

Перше, що вам потрібно зробити – це встановити та активувати плагін Font Awesome для WordPress. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

Після активації плагін дозволяє підтримувати Font Awesome для вашої теми. Тепер ви можете редагувати будь-яку публікацію або сторінку WordPress і використовувати короткий код значка, як це:

[icon name = “ракета”]

Цей короткий код можна використовувати разом з іншим текстом або самостійно у виділеному блоці короткого коду.

Додавання короткого коду шрифту значка в WordPress

Після додавання ви можете переглянути свій пост або сторінку, щоб побачити, як піктограма буде виглядати на реальному веб-сайті. Ось як це виглядало на нашому тестовому сайті.

Попередній перегляд піктограм

Ви також можете додати короткий код піктограми шрифту всередині блоку абзацу, де ви можете використовувати параметри блоку для збільшення розміру значка.

Збільшити розмір піктограми

Зі збільшенням розміру тексту це може виглядати дивно всередині текстового редактора. Це тому, що шорт-код не змінюється автоматично в шрифт значка всередині редактора блоків.

Вам потрібно буде натиснути кнопку попереднього перегляду на своїй публікації чи сторінці, щоб побачити, як виглядатиме фактичний розмір піктограми.

Шрифт піктограми збільшений

Ви також можете використовувати короткий код піктограми всередині стовпців та створювати такі функції:

Використання шрифтів значків у вікнах функцій

2. Використання значків шрифтів з WordPress Page Builder

Найбільш популярні плагіни для розробників сторінок WordPress оснащені вбудованою підтримкою шрифтів значків. Це дозволяє легко використовувати шрифти значків на своїх цільових сторінках, а також інших областях вашого веб-сайту.

Бівер будівельник

Beaver Builder – найкращий плагін для створення веб-сторінок WordPress на ринку. Це дозволяє легко створювати власні макети сторінок у WordPress, не записуючи жодного коду.

Beaver Builder оснащений красивими іконками та готовими до використання модулями, які ви можете просто перетягнути до своєї публікації та сторінок.

Піктограми Beaver Builder

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

Редагуйте шрифти значків у програмі Beaver Builder

Ви навіть можете створювати повністю власні теми WordPress, не вводячи жодного коду, використовуючи продукт Themer Builder Builder.

Elementor Pro

Elementor – ще один популярний плагін для створення веб-сторінок WordPress. Він також постачається з декількома елементами, які дозволяють використовувати шрифти значків, включаючи елемент Icon.

Значок елемента

Ви можете просто перетягнути іконку в будь-яке місце і використовувати його з рядками, стовпцями та таблицями для створення прекрасних сторінок.

Інші популярні розробники сторінок, такі як Divi та Visual Composer, також мають повну підтримку шрифтів значків.

3. Додавання шрифтів значків у WordPress вручну з кодом

Як ми вже згадували раніше, що значки шрифтів – це лише шрифти, і їх можна додавати на ваш сайт, як і ви можете додавати будь-які власні шрифти.

Деякі шрифти значків, такі як Font Awesome, доступні на серверах CDN в Інтернеті і можуть бути безпосередньо пов’язані з вашої теми WordPress.

Ви також можете завантажити весь каталог шрифтів у папку в темі WordPress, а потім використати ці шрифти на вашому аркуші стилів.

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

Спосіб 1:

Цей ручний метод досить простий.

Спочатку вам потрібно зайти на веб-сайт Font Awesome та ввести свою електронну адресу, щоб отримати вбудований код.

Отримати вбудовуваний шрифт Awesome

Тепер перевірте свою поштову скриньку на електронну пошту від Font Awesome із вбудованим кодом. Скопіюйте та вставте цей вбудований код у файл header.php теми теми WordPress безпосередньо перед тегом.

Ваш вбудований код буде єдиним рядком, який отримає бібліотеку Font Awesome безпосередньо з їх серверів CDN. Це буде виглядати приблизно так:

Цей метод найпростіший, але він може викликати конфлікти з іншими плагінами.

Кращим підходом було б правильно завантажувати JavaScript у WordPress за допомогою вбудованого механізму зачеплення.

Замість посилань на таблицю стилів із шаблону заголовка теми можна додати наступний код у файл function.php теми або у плагін, специфічний для сайту..

функція wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, правда);

}

добавлення (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Спосіб 2:

Другий метод не найпростіший, але він дозволить розмістити шрифти значків Font Awesome на власному веб-сайті.

Спочатку вам потрібно зайти на веб-сайт Font Awesome, щоб завантажити пакет шрифтів на свій комп’ютер.

Завантажте шрифт значка на свій комп’ютер

Просто завантажте шрифти значків і розпакуйте пакет.

Тепер вам потрібно буде підключитися до хостингу WordPress за допомогою FTP-клієнта та перейти до каталогу теми WordPress..

Вам потрібно створити там нову папку та назвати її шрифтами. Далі вам потрібно завантажити вміст папки з шрифтами значків у каталог шрифтів на веб-сервері хостингу.

Завантаження шрифтів значків до вашої теми WordPress

Тепер ви готові завантажити шрифти значків у свою тему WordPress. Просто додайте цей код у файл function.php теми вашої теми або у плагін, орієнтований на сайт.

функція wpb_load_fa () {

wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-awesome.min.css’);

}

добавлення (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Ви успішно завантажили шрифт Awesome у свою тему WordPress.

Тепер приходить частина, де ви будете додавати фактичні значки до теми, публікацій чи сторінок WordPress.

Ручне відображення значків шрифтів у WordPress

Перейдіть на веб-сайт Font Awesome, щоб переглянути повний список наявних значків. Клацніть будь-яку піктограму, яку ви хочете використовувати, і ви зможете побачити її ім’я.

Назва піктограми
Скопіюйте ім’я значка та використовуйте його у WordPress.

Ви можете розмістити цей значок у таблиці стилів теми:

.fa-arrow-alt-circle-up {
розмір шрифту: 50px;
колір: # FF6600;
}

Ви також можете комбінувати різні піктограми разом та стилювати їх одразу. Наприклад, скажімо, що ви хочете відобразити список посилань із піктограмами поруч. Ви можете обернути їх під елементом із певним класом.

Головна
Бібліотека
Програми
Налаштування

Тепер ви можете їх розмістити у таблиці стилів теми:

.іконки-група-елемент i {
колір: # 333;
розмір шрифту: 50px;
}
.іконки-група-елемент i: навести курсор {
колір: # FF6600
}

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map