7 експертних порад щодо веб-іконок встановлює використання та переваги

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

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

Який набір іконок ви використовуєте? Повідомте нас у коментарях!

 Використовуєте ви певний набір іконок для свого веб-сайту? Чи використовуєте Ви шрифт Awesome для конкретного використання (наприклад, з Shopify, для розсилки новин, ...)? Якщо так, то чому ви його використовуєте та який ваш досвід роботи з набором значків? Ви використовували їх CDN, чи помітили якісь покращення у використанні?

Джефф Рошер: це додає приємного простого стилю, який клієнти вважають сучасним та привабливим

Ми використовуємо шрифт Awesome на eWorkOrders.com. Він є частиною як нашого маркетингового сайту, так і нашого програмного забезпечення як сервісної (SAAS) пропозиції, комп'ютеризованої системи управління технічним обслуговуванням (CMMS). На нашому маркетинговому сайті він додає приємних простих стилів, які потенційні клієнти вважають сучасними та привабливими. Ми додали цікаві межі та події миші, щоб зробити їх більш інтерактивними та захоплюючими. Для наших клієнтів піктограми шрифту Awesome використовуються як візуальна сигналізація всередині полів введення, щоб допомогти визначити, який тип даних слід вводити, як піктограма календаря в полі дати, конверт у полі адреси електронної пошти чи значок телефону у поле для номера телефону. Вони використовуються на функціональних кнопках, таких як редагування, копіювання та друк.

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

Шрифт Awesome був приголомшливим! Їх CDN швидко, і існує безліч варіантів для різних значків, які нам потрібні. Ми ніколи не були розчаровані.

Рейчел Фолі: доступний спосіб легко отримати доступ до масивної бібліотеки іконок

На карті Мої клієнти ми повністю покладаємось на шрифт Awesome для нашої іконографії за всіма маркетинговими каналами та нашим продуктом, включаючи наш:

• Веб-сайт
• Електронні листи
• Соціальні мережі
• Спеціальна графіка
• Мобільний додаток
• Веб-додаток

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

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

FA завжди був надійним для нас, оскільки ми повністю прийняли його в січні.

Ендрю Рудіцер: Як модернізували шрифт Awesome, так і ми

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their Соціальні мережі Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Шрифт Awesome тепер пропонує широкий спектр значків на вибір. Ми вважаємо цю гнучкість корисною для нас від фази проектування до фази розробки. Для Font Awesome їх платформа пропонує два варіанти для своїх користувачів. Перші параметри - це безкоштовний сервіс, який пропонує 1588 безкоштовних іконок на вибір. Другий варіант - членство в Pro, яке пропонує 7 842 іконки. Ця компанія також має те, що ми називаємо шпаргалкою Icon. У цьому списку відображаються всі їхні іконки, які пропонує шрифт Awesome, який повідомляє нас, чи є вони частиною безкоштовного пакета або професійного пакету.

Щоб додати, Font Awesome також пропонує можливість витягнути свій код зі свого CDN. Ми настійно рекомендуємо пройти їх маршрут. Їх CDN має швидкий час відгуку, і ми майже не затримуємось між нашим сайтом та їх платформою.

Джефф Ромеро: це робить швидкість сторінки набагато швидшою

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

Хоча це невеликий файл зображень, це трохи процес отримання послідовного набору значків та їх відповідності шаблону сайту. Тепер, використовуючи Font Awesome та його плагін Wordpress, ми можемо замінити піктограми на постійний набір медіа, який просто вимагає копіювання / вставлення рядка HTML. Ще краще, піктограми можна змінити за допомогою невеликої кількості CSS (використовуючи властивість розміру шрифту). Піктограми відображаються краще, ніж піктограма на основі зображення, і вони добре видно на мобільних пристроях. Нарешті, оскільки це швидкість HTML, а не файл зображення, це робить швидкість сторінки значно швидшою.

Венс: особливо добре, коли ти не маєш дизайнера у своїй команді

Як веб-розробник, я використовую Font Awesome як швидке рішення для безлічі приємних іконок. При цьому, Font Awesome особливо гарний, коли у вашій команді розробників немає дизайнера. Це зручно для розробки плагінів Wordpress, оскільки розробники могли вбудувати їх у свої додатки, використовуючи CDN-файли Font Awesome за найкоротший час.

Мій досвід роботи з шрифтом Awesome хороший поки що. Але це не означає, що у нього немає недоліків. Одним із очевидних недоліків є швидкість завантаження сторінки (продуктивність). Оскільки це швидке рішення, вам потрібно вбудувати цілий набір піктограм, хоча ви просто використовуєте кілька піктограм. Це може знизити швидкість завантаження веб-сайту та показники швидкості сторінки Google (PSI).

Сонячний Ешлі: простий, чистий і миттєво впізнаваний для нових відвідувачів

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

Бурак Йоздемір: Пір'яні іконки не викликають надмірного розміру DOM

Feather Icons - це колекція читабельних, візуально приємних ікон з відкритим кодом, розроблених та підтримуваних Cole Bemis. Станом на червень 2020 року доступно понад 280 іконок. Усі піктограми, надані Feather Icons, мають ліцензію MIT та завантажуються окремо у вигляді файлів SVG. Перед завантаженням ви можете налаштувати розмір піктограми, колір обведення піктограми та ширину обведення на веб-сайті Feather Icon.

Пір'яні піктограми можуть стати прекрасним вибором для вашого веб-сайту чи проекту, якщо ви розробник або знаєте, як впоратися з деякими основними фасадними завданнями. Оскільки ці легкі піктограми також можуть бути відображені за допомогою модульної бібліотеки JavaScript, вони не спричиняють надмірного розміру DOM, показника, який може зашкодити роботі веб-сторінки. Таким чином, за допомогою Feather Icons ви можете знизити швидкість завантаження сторінки в порівнянні з іншими пакетами, доступними на ринку. Єдиним недоліком використання цього набору значків є те, що ви не можете знайти більшість значків марки.