7 советов экспертов по использованию веб-иконок и преимуществ
- Джефф Рошер: он добавляет приятный простой стиль, который покупатели считают современным и привлекательным
- Рэйчел Фоли: доступный способ получить доступ к огромной библиотеке значков с легкостью
- Эндрю Рудицер: как улучшился Font Awesome, так и мы
- Джефф Ромеро: это делает скорость страницы намного быстрее
- Вэнс: особенно хорошо, когда в вашей команде нет дизайнера
- Санни Эшли: просто, чисто и мгновенно узнаваемо для новых посетителей
- Бурак Оздемир: Иконки перьев не вызывают чрезмерный размер DOM
Вы задаетесь вопросом об использовании набора иконок для вашего веб-сайта и какой выбрать? Эти советы экспертов могут просто убедить вас в том, что многие профессиональные веб-разработчики уже знают: гораздо проще искать значки из включенного набора значков, чем находить значки один за другим и находить способ их совместимости.
Мы попросили сообщество предоставить им лучшие советы по использованию наборов значков, и многие из них согласились использовать популярный набор значков Font Awesome, но это не единственный набор значков, доступный на рынке.
Какой набор иконок вы используете? Дайте нам знать в комментариях!
Используете ли вы определенный набор иконок для вашего сайта? Используете ли вы Font Awesome для определенного использования (то есть с Shopify, для рассылки новостей, ...)? Если да, то почему вы используете его, и каков ваш опыт с набором иконок? Вы использовали их CDN, заметили ли вы какие-либо улучшения в использовании?Джефф Рошер: он добавляет приятный простой стиль, который покупатели считают современным и привлекательным
Мы используем Font Awesome на eWorkOrders.com. Он является частью нашего маркетингового сайта и нашего программного обеспечения как услуги (SAAS), компьютеризированной системы управления техническим обслуживанием (CMMS). На нашем маркетинговом сайте он добавляет приятный простой стиль, который потенциальные клиенты находят современным и привлекательным. Мы добавили интересные границы и события наведения мыши, чтобы сделать их более интерактивными и захватывающими. Для наших клиентов значки Font Awesome используются в качестве визуальной подсказки внутри полей ввода, чтобы помочь определить, какой тип данных следует вводить, например, значок календаря в поле даты, конверт в поле адреса электронной почты или значок телефона в поле для номера телефона. Они используются на функциональных кнопках, таких как редактирование, копирование и печать.
Значки используются для предоставления быстрой визуальной информации о данных, например, красного восклицательного значка рядом с просроченным рабочим заданием или когда что-то требует внимания. Они также есть в нескольких других местах, чтобы программа выглядела лучше.
Font Awesome был потрясающим! Их CDN быстр, и есть много вариантов для каждого вида иконок, которые нам нужны. Мы никогда не были разочарованы.
Джефф является президентом eWorkOrders.com. eWorkOrders - это простая в использовании веб-система CMMS, которая помогает клиентам управлять запросами на обслуживание, рабочими заказами, активами, профилактическим обслуживанием и многим другим.
Рэйчел Фоли: доступный способ получить доступ к огромной библиотеке значков с легкостью
В Карта Мои клиенты мы полностью полагаемся на Font Awesome для нашей иконографии по всем маркетинговым каналам и нашему продукту, включая наши:
- Интернет сайт
- Сообщения электронной почты
- Социальные медиа
- Пользовательская Графика
- Мобильное приложение
- Веб-приложение
Мы используем Font Awesome, потому что это доступный способ получить доступ к огромной библиотеке иконок. Стиль больше на игривой стороне, которая соответствует нашему бренду; Кроме того, возможность использовать различные веса и стили иконок дает нам свободу.
Мы используем CDN для наших приложений, что обеспечивает очень единообразное взаимодействие с пользователем продукта. Плюс - это супер просто обновить, когда нам нужно. Благодаря маркетинговым материалам мы немного более гибки и используем комбинацию CDN, нашей локальной установки и векторных версий.
FA всегда был для нас надежным, так как мы полностью приняли в январе.
Рэйчел - веб-дизайнер из Нью-Йорка и специалист по контент-маркетингу, стремясь улучшить растущие бренды B2B и обеспечить долгосрочный маркетинговый успех с помощью стратегии SEO. В настоящее время она работает в Карта Мои клиенты, компании, занимающейся продажами программного обеспечения для В2В, которая создает решения для групп продаж на местах.
Эндрю Рудицер: как улучшился Font 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.
Font Awesome теперь предлагает широкий выбор иконок на выбор. Мы находим эту гибкость полезной для нас от фазы проектирования до нашей фазы разработки. Для Font Awesome их платформа предлагает пользователям два варианта. First Options - это бесплатный сервис, который предлагает 1588 бесплатных иконок на выбор. Второй вариант - членство Pro, которое предлагает 7 842 иконки. Эта компания также имеет то, что мы называем шпаргалкой Icon. Этот список отображает все их значки, которые предлагает Font Awesome, который сообщает нам, являются ли они частью бесплатного или профессионального пакета.
Чтобы добавить, Font Awesome также предлагает возможность извлечь их код из CDN. Мы настоятельно рекомендуем пройти их маршрут. Их CDN имеет быстрое время отклика, и у нас практически нет «лагов» между нашим сайтом и их платформой.
Эндрю Рудицер, ведущий технологический координатор
Джефф Ромеро: это делает скорость страницы намного быстрее
Мы разрабатываем индивидуальные веб-сайты на Wordpress для клиентов малого и среднего бизнеса. Мы исторически использовали изображения для представления различных значков на наших веб-сайтах, от профилей в социальных сетях до значков телефона и электронной почты. Процесс использования изображения для значков требует поиска согласованного набора значков, загрузки их и изменения их размера, чтобы они соответствовали сайту.
Несмотря на то, что это небольшой файл изображения, процесс создания согласованного набора значков и сопоставления их с шаблоном сайта представляет собой небольшой процесс. Теперь, используя Font Awesome и его плагин Wordpress, мы можем заменить иконки на согласованный набор мультимедиа, который просто требует копирования / вставки строки HTML. Более того, значки могут быть изменены с небольшим количеством CSS (используя свойство font-size). Значки отображаются лучше, чем значки на основе изображений, и они хорошо видны на мобильных устройствах. Наконец, поскольку это строка HTML, а не файл изображения, скорость страницы значительно увеличивается.
Джефф Ромеро является соучредителем Octiv Digital, цифрового маркетингового агентства, которое специализируется на местной и корпоративной стратегии SEO, управлении рекламой с оплатой за клик, услугах веб-дизайна / разработки и маркетинговой аналитики.
Вэнс: особенно хорошо, когда в вашей команде нет дизайнера
Как веб-разработчик, я использую Font Awesome как быстрое решение для множества хороших иконок. При этом Font Awesome особенно хорош, когда в вашей команде разработчиков нет дизайнера. Это удобно для разработки плагинов Wordpress, потому что разработчики могут встраивать их в свои плагины, используя CDN Font Awesome в кратчайшие сроки.
Мой опыт работы с Font Awesome пока хорош. Но это не значит, что у него нет недостатков. Одним из очевидных недостатков является скорость загрузки страницы (производительность). Поскольку это быстрое решение, вам нужно встроить целый набор значков, даже если вы просто используете несколько значков. Это может снизить скорость загрузки сайта и оценки Google Page Speed (PSI).
Вэнс, веб-разработчик и веб-владелец.
Санни Эшли: просто, чисто и мгновенно узнаваемо для новых посетителей
Мы используем иконки Font Awesome в нижнем колонтитуле нашего сайта. В частности, мы используем значки Facebook, Twitter и LinkedIn для ссылки на наши каналы в социальных сетях. Они простые, чистые и мгновенно узнаваемые для новых посетителей. Как знают другие пользователи Font Awesome, их также очень быстро и легко настроить.
Санни Эшли, основатель и генеральный директор Autoshopinvoice. Autoshopinvoice предоставляет программное обеспечение для управления магазином для независимых автосервисов и гаражей.
Бурак Оздемир: Иконки перьев не вызывают чрезмерный размер DOM
Feather Icons - это коллекция читаемых, визуально приятных иконок с открытым исходным кодом, разработанных и поддерживаемых Коулом Бемисом. По состоянию на июнь 2020 года доступно более 280 значков. Все значки, предоставляемые Feather Icons, имеют лицензию MIT и загружаются отдельно в виде файлов SVG. Вы можете настроить размер значка, цвет обводки и ширину обводки на веб-сайте Feather Icon перед их загрузкой.
Иконки «Перья» могут быть отличным выбором для вашего веб-сайта или проекта, если вы разработчик или знаете, как справляться с некоторыми базовыми задачами. Поскольку эти легкие значки также могут отображаться с помощью модульной библиотеки JavaScript, они не приводят к чрезмерному размеру DOM, метрике, которая может повредить производительности вашей веб-страницы. Таким образом, используя Feather Icons, вы можете снизить скорость загрузки страниц по сравнению с другими пакетами, доступными на рынке. Единственным недостатком использования этого набора значков является то, что вы не можете найти большинство значков бренда.
Перо Иконы
Бурак Оздемир - веб-разработчик из Турции. Он специализируется на создании веб-приложений.
Мишель Пинсон - энтузиаст путешествий и создатель контента. Объединяя страсть к образованию и исследованиям, он отправился на то, чтобы обмениваться знаниями и вдохновлять других через очарование образовательного содержания. Сближение мира ближе друг к другу, расширяя возможности людей с глобальной экспертизой и чувством страсти.
