Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

Додаємо шрифти для іконок у WordPress

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Що таке шрифти для іконок

По суті це шрифт, повністю створений з іконок. Аналогічні шрифти ви, напевно, вже бачили у форматі Webdings або Обмотки. Тільки у сучасних шрифтах для іконок дизайн більш адаптований та відображає логотипи соціальних медіа, символи зі смартфонів та кошики для замовлень (це якщо назвати лише базові символи та позначення).

Додаємо шрифти для іконок у WordPress

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

Використовуємо правильно шрифти для іконок на сайті

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

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

Приклади шрифтів для іконок

Більшість шрифтів для створення іконок на сайтах у меню. безкоштовніа тому їх використання можливе для широкої аудиторії. Ось найпопулярніші варіанти:

1.Шрифт Високий

Додаємо шрифти для іконок у WordPress

Шрифт Високий — один із популярних наборів шрифтів для формування іконок, містить порядок 360 + іконок, які можна використовувати безкоштовно. Цей шрифт регулярно оновлюється та поповнюється новими символами та піктограмами. Усі іконки у складі шрифту можна розбити на ряд основних груп:

  • іконки веб-додатків
  • валюти та гроші
  • іконки текстових редакторів
  • вказівники
  • відео-плеєри
  • іконки брендів
  • іконки медичної тематики

Залежно від теми сайту можна вибрати ті чи інші іконки. Однією з проблем, пов'язаних з використанням таких шрифтів, є сумісність з екранами різних пристроїв і різними ОС.

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

Додаємо шрифти для іконок у WordPress

Для вставки іконки потрібно вставити шорт-код тієї іконки-символу, який ви бажаєте додати:

[icon name=icon-pencil]

Також можна використовувати:

Повний список іконок, а також їхні назви можна знайти ось тут.

Використовуючи плагін Font Awesome Menus, ви зможете додати іконки в меню навігації WordPress, а також у постах та на сторінках.

Додаємо шрифти для іконок у WordPress

На практиці це виглядає приблизно так:

Додаємо шрифти для іконок у WordPress

Для додавання іконок просто додайте 'icon-iconname' в полі 'Класи CSS' у меню.

Додаємо шрифти для іконок у WordPress

2.Genericons

Додаємо шрифти для іконок у WordPress

Genericons — безкоштовний GPL-шрифт, для роботи з іконками в рамках цього шрифту є окремий плагін під назвою Genericon'd. З його допомогою можна використовувати шрифти на сайтах WordPress для створення іконок, застосовуючи також HTML, CSS або шорт-коди.

Додаємо шрифти для іконок у WordPress

Плагін також відображає всі іконки на панелі адміністрування WordPress.

3.We Love Icon Fonts

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

Додаємо шрифти для іконок у WordPress

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

4.Icon Moon

Додаємо шрифти для іконок у WordPress

Icon Moon- Безкоштовний пакет з 450 іконок, а також є можливість купити преміум набір за ціною $39 за 900 іконок. Є у цього проекту і безкоштовна програма, в якій можна створити власний шрифт шляхом вибору іконок із існуючих наборів та складанням набору з різних доступних пакетів із іконками. Це дозволить вам заощадити час і не завантажувати з різних джерел багато шрифтів, які ви хотіли б спробувати.

Є у проекту та послуга Icon Delivery Network (CDN): всі витрати ресурсів на хостинг шрифтів вони беруть на себе, щоб прискорити завантаження сторінок та зменшити навантаження на ваш сервер.

Ще безкоштовні шрифти для іконок можна знайти на одному з наступних сайтів:

  • Heydonworks
  • Fontello
  • Modern Pictograms
  • Social Icons Font
  • портретний
  • Foundation Icon Font
  • Ентипо
  • Типікони

5. Widget Icon Plugin

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

Ці іконки також можна використовувати у складі віджетів для WordPress, щоб з бічної панелі щоразу вибирати релевантні символи та піктограми:

Додаємо шрифти для іконок у WordPress

плагін Widget Icon дуже простий у використанні відразу після встановлення. Вам практично одразу буде доступна вставка вибраної іконки у пост, сторінку чи меню з набором опцій. Можна переглянути повний список іконок та вибрати одну зі списку. Також можна встановити розміщення, розмір і колір іконки. Іконки можна використовувати у всіх елементах сайту.

Widget Icon був розроблений для фреймворку Завантаження Twitterтому він ідеально підходить для тем з адаптивним дизайном.

Висновок

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

Джерело: WPLift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук