Використання спеціальних шрифтів для відображення іконок є популярним трендом у сучасному веб-дизайні, який застосовується у багатьох платних темах для WordPress.
У цьому пості ми поговоримо про те, як застосувати спеціальні шрифти для створення іконок для WordPress-теми.
Що таке шрифти для іконок
По суті це шрифт, повністю створений з іконок. Аналогічні шрифти ви, напевно, вже бачили у форматі Webdings або Обмотки. Тільки у сучасних шрифтах для іконок дизайн більш адаптований та відображає логотипи соціальних медіа, символи зі смартфонів та кошики для замовлень (це якщо назвати лише базові символи та позначення).
В основному ці іконки, створені за допомогою шрифтів, векторні та вбудовуються безпосередньо до сторінки. Перевага їх використання полягає в тому, що вони вантажаться швидше, ніж звичайні картинки, краще підходять для адаптивної верстки і більш органічно виглядають з будь-якими типами колірної схеми на сайті.
Використовуємо правильно шрифти для іконок на сайті
Тепер, коли ви зрозуміли основну ідею та призначення шрифтів для іконок, перейдемо до того, як ці шрифти використовувати та де їх знайти для свого WordPress сайту.
Перший крок - знайти потрібний вам шрифт або створити свій власний у наборі тих ікон, які потрібні саме вам. Також можна встановити плагін, який проробить основну частину роботи за вас і допоможе вам швидко стартувати з цим новим шрифтом для іконок.
Приклади шрифтів для іконок
Більшість шрифтів для створення іконок на сайтах у меню. безкоштовніа тому їх використання можливе для широкої аудиторії. Ось найпопулярніші варіанти:
1.Шрифт Високий
Шрифт Високий — один із популярних наборів шрифтів для формування іконок, містить порядок 360 + іконок, які можна використовувати безкоштовно. Цей шрифт регулярно оновлюється та поповнюється новими символами та піктограмами. Усі іконки у складі шрифту можна розбити на ряд основних груп:
- іконки веб-додатків
- валюти та гроші
- іконки текстових редакторів
- вказівники
- відео-плеєри
- іконки брендів
- іконки медичної тематики
Залежно від теми сайту можна вибрати ті чи інші іконки. Однією з проблем, пов'язаних з використанням таких шрифтів, є сумісність з екранами різних пристроїв і різними ОС.
Використання таких шрифтів для WordPress можливе навіть завдяки безкоштовному плагіну. Дивовижні значки шрифту, який дозволяє вам вставляти іконки у пости та сторінки з використанням шорт-кодів.
Для вставки іконки потрібно вставити шорт-код тієї іконки-символу, який ви бажаєте додати:
[icon name=icon-pencil]
Також можна використовувати:
Повний список іконок, а також їхні назви можна знайти ось тут.
Використовуючи плагін Font Awesome Menus, ви зможете додати іконки в меню навігації WordPress, а також у постах та на сторінках.
На практиці це виглядає приблизно так:
Для додавання іконок просто додайте 'icon-iconname' в полі 'Класи CSS' у меню.
2.Genericons
Genericons — безкоштовний GPL-шрифт, для роботи з іконками в рамках цього шрифту є окремий плагін під назвою Genericon'd. З його допомогою можна використовувати шрифти на сайтах WordPress для створення іконок, застосовуючи також HTML, CSS або шорт-коди.
Плагін також відображає всі іконки на панелі адміністрування WordPress.
3.We Love Icon Fonts
На цьому сайті зберігається ціла колекція безкоштовних та легальних шрифтів, де можна вибрати шрифт із однією з доступних опцій. Вам надається код для додавання до CSS-файлу та код для вставлення іконок у сторінки та пости на WordPress-сайті.
Дуже простий у роботі сервіс, який чудово підійде для перегляду та використання шрифтів для створення іконок на сайтах.
4.Icon Moon
Icon Moon- Безкоштовний пакет з 450 іконок, а також є можливість купити преміум набір за ціною $39 за 900 іконок. Є у цього проекту і безкоштовна програма, в якій можна створити власний шрифт шляхом вибору іконок із існуючих наборів та складанням набору з різних доступних пакетів із іконками. Це дозволить вам заощадити час і не завантажувати з різних джерел багато шрифтів, які ви хотіли б спробувати.
Є у проекту та послуга Icon Delivery Network (CDN): всі витрати ресурсів на хостинг шрифтів вони беруть на себе, щоб прискорити завантаження сторінок та зменшити навантаження на ваш сервер.
Ще безкоштовні шрифти для іконок можна знайти на одному з наступних сайтів:
- Heydonworks
- Fontello
- Modern Pictograms
- Social Icons Font
- портретний
- Foundation Icon Font
- Ентипо
- Типікони
5. Widget Icon Plugin
Цей безкоштовний плагін використовує іконки з пакетів та бібліотек Шрифт Високий и Невловимийотримання доступу до сотень різних іконок.
Ці іконки також можна використовувати у складі віджетів для WordPress, щоб з бічної панелі щоразу вибирати релевантні символи та піктограми:
плагін Widget Icon дуже простий у використанні відразу після встановлення. Вам практично одразу буде доступна вставка вибраної іконки у пост, сторінку чи меню з набором опцій. Можна переглянути повний список іконок та вибрати одну зі списку. Також можна встановити розміщення, розмір і колір іконки. Іконки можна використовувати у всіх елементах сайту.
Widget Icon був розроблений для фреймворку Завантаження Twitterтому він ідеально підходить для тем з адаптивним дизайном.
Висновок
Сподіваємося, що з цієї посади ви зрозуміли, що являють собою шрифти для іконок, і як можна їх використовувати у складі різних тем для WordPress. Дотримуючись порад і підказок з цієї посади, використовуючи шрифти та плагіни, можна красиво оформити власний сайт. Популярність таких іконок не означає, що їх треба використовувати скрізь і всюди; проте такі іконки при вмілому використанні можуть прикрасити ваш веб-сайт.
Джерело: WPLift.com
Коментарі до запису: 0