Иконки маленькие для сайта: Скачать бесплатные мини иконки для Ваших сайтов и веб-проектов

Тизеры — это специальные баннеры или иконки, созданные в едином стиле с дизайном конкретного сайта.

Для одного и того же случая обычно делают однотипные или иконки схожие по стилю.

Поиск в GUI варианте логически и физически связан с экраном заказа и вызывается из него нажатием клавиши «Ctrl-F» или иконки с изображением бинокля.

Вы не можете использовать кукол, одежду, информацию, любые данные, имена, рисунки, логотипы или иконки с веб-сайта Stardoll (мы называем это «материалами Stardoll»), если на веб-сайте ясно не указано, что это разрешено.

Suggest an example

Other results

Пользователю предлагался текстовый интерфейс, не использующий мышь, иконки или графику.

Конечно, есть также все другие социальные услуги закладки, депозиты или отдельные иконки.

Для открытия документа нажмите на его название или на иконку возле него.

Если плеер не предоставляет доступа к свойствам фильтра то настройку можно произваодить из меню Пуск ‘AC3Filter Config’ или по иконке в Панели Управления.

Для улучшения визуальной группировки типов паролей в программе вы можете любому аккаунту или папке назначить свою иконку из более чем 120 доступных.

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

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

Подписаться с помощью веб-браузера, нажав на иконку RSS или с помощью специального чтения каналов, как «Google header» и получатьпоследние обьекты как только они появляются.

Если Вы правильно ввели все параметры транспондера, правильно указали параметры LNB, то Вы сможете успешно залочить транспондер (голубая или зеленая статус-иконка).

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

До Windows 8 программы идентифицировались статическими иконками.

Двойной щелчок по иконке — причина.

Голубая иконка — транспондер залочен, данные не принимаются.

Это простые иконки — вы кликаете на них.

Иконки поставляются в исходный файл Photoshop.

Настройки открываются двойным щелчком по иконке Быстрой маски.

14 небольших мини-наборов иконок для ваших веб-проектов

Иконки и визуальные подсказки — важные дополнения к любому веб-приложению, но их может быть сложно создать самостоятельно из-за крошечных размеров.

К счастью, в сети есть множество бесплатных высококачественных наборов иконок, созданных талантливыми дизайнерами. Вы можете быть уверены, что в этой коллекции наборов вы найдете практически любой стиль иконки, которая вам нужна.

Мы собрали здесь различные мини-наборы значков с различным дизайном, такие как флаги (для многоязычных веб-сайтов), общие значки (печать, сохранение, загрузка) и многое другое.Большинство этих небольших значков представлены в формате .ico, векторном EPS и даже в формате Flash SWF. Кроме того, их можно использовать на личных и общественных веб-сайтах, в бесплатных и открытых программных приложениях, но убедитесь, что вы проверяете их лицензии индивидуально. Некоторые из этих наборов включают значки для малого бизнеса, маленькие звездочки, маленькие пиксельные значки, маленькие значки меню и многое другое.

Загрузите их по ссылкам ниже и добавьте в свою коллекцию бесплатных иконок.

Мини-иконки от FamFamFam

FamFamFam — это ваш сайт, если вам нужен мини-значок.Это веб-сайт Марка Джеймса, веб-разработчика из Бирмингема, Великобритания. Этот конкретный набор содержит 114 маленьких иконок в формате GIF, которые можно бесплатно использовать как для коммерческих, так и для личных проектов.

Монохромные иконки от Tutorial9

На Tutorial9 вы можете найти этот набор из 108 красивых и минималистичных моно-иконок. Если вам нужен красочный значок, не беспокойтесь, его можно легко настроить. Этот набор небольших значков можно использовать бесплатно в личных и коммерческих проектах без указания авторства.

Иконки флагов от FamFamFam

Это еще один набор, который FamFamFam может вам предложить. Если вам когда-нибудь понадобится значок флага, вы обязательно найдете тот, который ищете, в этом наборе. Этот набор содержит 247 маленьких иконок — в форматах GIF и PNG. Вы найдете большинство стран в мире в виде маленьких пиксельных значков.

Иконки SweetiePlus от Sublink Interactive

Этот новый набор от Sublink Interactive настолько хорош, насколько это возможно. Если вы пытаетесь найти значок с чистым и очаровательным дизайном, вам следует взглянуть именно сюда.Эти маленькие значки имеют чистую и простую форму, а набор состоит из 120 значков, идеально подходящих для использования на веб-сайтах или в приложениях.

Иконы фуги П.Юсукэкамияманэ

Этот набор от p.yusukekamiyamane содержит так много мини-иконок, что будет сложно не найти ту, которую вы ищете. В нем огромное количество 3570 иконок в формате PNG (16 × 16 пикселей) + 352 бонусных иконки.

Иконки от app-bits.com

Это набор действительно красивых мини-иконок от app-bit.Их можно использовать бесплатно, если вы их не изменяете и не перепродаете. Иконки бывают PNG размером 26 пикселей и Retina 52 пикселей, и вы можете использовать их для коммерческих или личных проектов.

Иконки от Picol.org

Picol.org также имеет прекрасную библиотеку мини-иконок, но помимо этого набора вы обнаружите, что они могут помочь вам создать иконку вашей мечты.

Иконки электронной коммерции

Это набор мини-иконок, которые можно использовать в веб-дизайне, мобильных приложениях и других проектах.Они доступны в форматах AI, EPS, PDF, PNG.

Иконки от Androidicons.com

Эти значки бывают разных размеров и цветов, и они были созданы вручную специально для вас. В этом наборе так много мини-иконок, что сложно не найти ту, которую вы ищете. Он содержит 250 маленьких бесплатных иконок 5 размеров и 14 цветов, а также собственный шрифт иконок.

Иконки от Defaulticon.com

На defaulticon.com невозможно не найти мини-значок, который вы ищете.Этот сайт представляет собой хранилище минималистичных черных иконок, которые можно использовать для дизайна пользовательского интерфейса. Всего доступно 653 мини-значка, от стрелок до различных форм, маленьких значков принтеров, маленьких значков фотоаппаратов, миниатюрных мужских / женских значков, значков мороженого, мини-медицинских значков, таких как первая помощь и другие, мини-значков файлов (добавить , загружать, изменять размер и т. д.), небольшие значки файлов и многое другое.

Экологические иконки от Filborg

Ecology Icons обязательно будет значок, который вам нужен, связанный с окружающей средой.Этот набор содержит не менее 20 крошечных значков высокого качества, которые являются векторными и легко редактируются.

Иконки от iconsweets.com

Эти бесплатные иконки, созданные с особой тщательностью, станут незаменимыми в вашем следующем веб-проекте. Взгляните на эти 60 бесплатных мини-иконок, которые вы можете загрузить и использовать в своих проектах. Некоторые из них включают в себя миниатюрные значки социальных кнопок, крошечные значки электронной почты, маленькие стрелки и многое другое.

Иконки от softface.com

Этот набор — еще один монохромный образец иконок.Несмотря на то, что они черно-белые, их можно легко настроить. Весь набор содержит 304 иконки в 32-битном формате PNG. Все они оптимизированы для размера 16 × 16 пикселей и доступны в размерах 16 × 16, 32 × 32 и 48 × 48 пикселей. Он включает файлы .ico и векторные иконки в форматах EPS и Flash SWF. В набор также входят прозрачные PNG-версии. Этот мини-набор значков содержит множество стрелок навигации, значков в виде сердечек, значков кнопок закрытия, значков мини-смайликов и многого другого.

Добавление мини-иконок в дизайн вашего веб-сайта действительно может иметь большое значение для некоторых веб-сайтов.Иногда бывает сложно найти подходящий небольшой набор значков, но мы надеемся, что облегчили вам эту задачу.

Создавайте более мелкую и качественную веб-графику с помощью шрифтов с пиктограммами

Адаптивные изображения означают вывод высококачественных изображений с ограниченным трафиком на нужные экраны. В настоящее время это не так просто, как кажется, но в разработке находится веб-стандарт адаптивных изображений, и множество умных разработчиков работают над этой проблемой.

При обсуждении адаптивных изображений подразумевается, что рассматриваемые изображения являются фотографическими изображениями. Для графики, однотонных изображений и значков уже есть лучшие решения, а именно шрифты SVG или пиктограммы.

Иконочные шрифты в последнее время привлекают к себе много внимания и не зря — они представляют собой простой и легкий способ обработки изображений, не зависящих от разрешения, которые хорошо смотрятся на любом экране. Действительно, в большинстве случаев иконочные шрифты могут заменить ваши старые спрайты изображений (хотя вы можете оставить свои спрайты для старых браузеров).И не забывайте, что иконочные шрифты — это шрифты, поэтому любой CSS-эффект, работающий с текстом, будет работать и с вашими символами.

Доступны десятки отличных наборов шрифтов для значков, которые вы можете просто добавить в свои проекты. Pictos, Glyphish и Symbolset — это лишь несколько популярных вариантов. Существуют также высококачественные бесплатные наборы значков, но также легко создать свой собственный файл шрифта из любого имеющегося у вас векторного изображения.

Превращение ваших векторных файлов в шрифты значков означает, что вы можете обслуживать свой RSS, значки социальных сетей и, возможно, даже свой логотип из одного и того же файла пользовательского шрифта (или даже прямо из таблицы стилей с данными в кодировке base-64).Более того, когда вы создаете свой собственный, вы можете включить только тех значков, которые вам нужны, что еще больше уменьшит размер файла.

Я использую приложение OS X Glyphs для упаковки наборов значков, но, как недавно отметил разработчик Джереми Кейт в своем блоге, существует ряд отличных (и бесплатных) онлайн-сервисов, которые могут превратить ваши значки в шрифт. пакеты. Предполагая, что вам не нужны все функции редактирования шрифтов, которые есть в настольных приложениях, таких как Glyphs, веб-сервисы, такие как IcoMoon, будут работать отлично.

Чтобы создать свою собственную коллекцию, в IcoMoon есть десятки шрифтов-иконок на выбор (некоторые бесплатные, некоторые нет), а также возможность конвертировать вашу собственную графику. После того, как вы соберете свой набор, приложение выдаст всю коллекцию в виде единого файла шрифта, готового к использованию на вашем сайте. Вы даже можете получить результирующий шрифт в кодировке base-64, чтобы избежать лишних HTTP-запросов.

Для получения дополнительной информации о том, как и зачем использовать иконочные шрифты, ознакомьтесь с прекрасным обзором в блоге Pictos, «Иконочные шрифты Криса Койера прекрасны», иконочным шрифтом разработчика Трента Уолтона и серией статей Дженн Лукас о иконочных шрифтах.

Как создавать мини-иконки

Многие люди спрашивали меня, как создать мой популярный пакет Mini Pixel Icon. На самом деле это относительно просто. Все, что вам нужно, это лишь некоторые базовые навыки работы с Photoshop. Здесь я покажу вам, как использовать инструмент «Карандаш» для создания пиксельных значков, а затем повторно использовать их для создания полной коллекции. Это техника, которую я использовал для создания более 320 иконок за день.

Скачать файл Photoshop

В Photoshop создайте новый документ размером 14 x 14 пикселей с прозрачным фоном.

Инструментом «Карандаш» выберите кисть размером 1 пиксель на палитре. Выберите темно-серый цвет и начните рисовать контур значка страницы. Чтобы нарисовать прямую линию, сначала щелкните начальную точку, затем, удерживая клавишу Shift, щелкните конечную точку.

Советы: В любое время, если вы хотите стереть пиксели, используйте инструмент «Ластик», выберите режим «Карандаш» и размер кисти 1 пиксель.

Выберите пустой вырез с помощью инструмента «Волшебная палочка».Создайте новый слой. Установите цвет переднего плана на светло-серый, а цвет фона на белый. Используйте инструмент «Градиент», перетащите его из верхнего угла в нижний по диагонали.

Создайте новый слой. Нарисуйте белую внутреннюю верхнюю границу размером 1 пиксель, чтобы создать эффект выделения. Затем нарисуйте внутреннюю нижнюю границу среднего серого цвета.

В палитре «Слои» выберите все слои и нажмите Cmd + G, чтобы сгруппировать все слои в папке.

Опять же, сначала начните рисовать контур, а затем залейте внутреннюю область сплошным цветом или градиентом. Когда вы закончите, сгруппируйте эти слои в отдельную папку.

Советы. Если вы хотите, чтобы цвет во всем наборе значков был одинаковым, сохраните цвета, которые вы использовали, в цветовых образцах.

Здесь показано, как я повторно использовал группы слоев для создания всей коллекции:

После того, как вы закончите набор, переключите (невидимые / видимые) группы слоев и сохраните их для Интернета (Cmd + Alt + Shift + S).

Лень делать это руководство? Вы можете скачать мой бесплатный мини-набор иконок.

Как и почему значки улучшают ваш веб-дизайн

Это гостевой пост нашего друга Николай Мертц

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

Давайте посмотрим, почему вы должны включать значки в свой веб-дизайн и как это сделать наиболее эффективно.

Иконки поддерживают ваш контент

Обычно у нас нет проблем, чтобы отличить красивый веб-дизайн от плохого. Тем не менее, бывает трудно сказать, почему один лучше другого.Иногда дьявол кроется в деталях.

Когда мы смотрим на содержание веб-сайта, все упирается в удобочитаемость. Насколько хорошо люди понимают основные моменты и насколько легко они могут читать и обрабатывать информацию. Иконки могут помочь по-разному для поддержки презентации вашего контента:

1. Иконки могут кратко изложить контент

2. Иконки могут привлечь внимание

3. Иконки могут улучшить читаемость

Давайте углубимся в каждую точка.

1. С помощью значков можно вкратце изложить содержание.

С помощью значков вы можете быстро подытожить содержание вашего текста. Иногда значков может быть достаточно даже для передачи контента, что делает ненужным чтение дополнительного текста. Отличный подход к актуальным иконкам — это метафоры. На мой взгляд, одна из самых важных вещей в иконках — это то, что вы выбираете метафоры, которые могут быть понятны людям, например, тележка или старомодное письмо.

Если вы думаете, что маленький значок недостаточно говорит о вашем содержании, вы можете более подробно остановиться и использовать небольшие изображения или снимки экрана.UserVoice — хороший пример того, как сделать точку более ясной, сопроводив текст значками и снимками экрана.

2. Иконки привлекают внимание

Картинка стоит тысячи слов. Значки тоже. Сайты без иконок и картинок могут быть довольно скучными. Представьте себе газету без изображений. Помимо броских заголовков, изображения привлекают наше внимание к определенному контенту, верно? Вот почему мы, как правило, сначала читаем те статьи, которые показывают привлекательное изображение. Поэтому важно интегрировать в свой дизайн значки, изображения или другие визуальные элементы.

Иконки могут привлекать внимание, но в то же время они могут помочь вам структурировать контент и разделить различные функции или службы. Например, SEOMOZ разделяет разные категории, используя разные значки вместо простого, скучного текста.

Еще один пример, на который я хотел бы сослаться, — это Lomax, датская компания, в которой я работаю. Мы также используем значки продуктов в качестве индикаторов определенного контента или просто для привлечения внимания к тексту или ссылкам:

Иногда веб-сайты используют одинаковые или похожие значки в разных местах.Например, мы используем два разных значка корзины покупок в разных местах на одной странице. Оба эти значка связаны с покупкой предметов, но при этом имеют разные функции. Их функции становятся понятными благодаря их расположению и тексту, который идет с каждым значком.

На этом этапе становится интересным принцип близости, который «требует, чтобы связанные элементы были визуально сгруппированы, создавая меньше беспорядка и создавая более организованный макет. Элементы, не связанные друг с другом, следует размещать дальше друг от друга, чтобы подчеркнуть отсутствие связи между ними.”

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

Когда вы работаете по принципу близости, убедитесь, что ваши значки имеют одинаковый размер и поля. Если вы вставите их непоследовательно, вы рискуете, что ваш дизайн будет выглядеть неуместно и беспорядочно.Подробнее об объединении текста и значков я расскажу позже в этой статье.

3. Значки могут улучшить читаемость

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

Эксперты по коэффициенту конверсии используют галочки как маркеры.Мало того, что это выглядит очень аккуратно, галочки также вызывают положительные ассоциации, такие как «доступность» или «правильность».

Иконки легче распознать и запомнить, чем маркеры. Хотя пули все одинаковые, значки гораздо более характерны и так же узнаваемы. Также намного проще отделить разные блоки текста друг от друга.

Очень немногие значки могут стоять отдельно

Неопытным пользователям сети может быть очень трудно понять и различать разные значки.Питер Стин Хёгенхауг провел исследование, в котором участникам теста показали несколько значков. Большинство участников не могли различить значки и даже испытывали трудности с их пониманием.

То, что должно было быть простым и интуитивно понятным, на самом деле было не так просто понять. Для меня, который работает с UX, может быть очевидно, что означают различные значки, но, как вы можете видеть из этих результатов, не все их понимают.

Решением этой проблемы могло бы стать совмещение значков с тестом.Таким образом, люди могут читать текст, чтобы помочь им понять значок. В более поздних случаях может быть достаточно показать значок без текста. Как упоминалось ранее, при объединении значков и текста важно учитывать принцип близости.

Сравнение Facebook с иконками и без них

Чтобы прояснить мои мысли, я хотел бы показать вам, как изменился бы Facebook, если бы все значки были удалены. Как вы думаете, без иконок это выглядит более-менее понятно, интересно, привлекательно?

Хотя некоторые значки дополняют друг друга, другие имеют решающее значение для некоторых функций сайта.Это означает, что, удаляя некоторые значки Facebook, вы также лишаетесь их функциональности. Например, значки в правой части логотипа интегрированы только как значки. Предположительно потому, что нет места для текстовых ссылок.

Заключение

Иконки играют жизненно важную роль в веб-дизайне. Несмотря на то, что они могут быть довольно маленькими и казаться излишними, они играют много разных ролей. Иконки могут быть отличным способом донести важный контент до сути. Они привлекают внимание и помогают посетителям вашего сайта находить и сканировать контент.

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

Серьезно, не используйте Icon Fonts

Иконки везде. Эти «маленькие чудотворцы» (как их описал Джон Хикс) помогают нам усиливать смысл интерфейсов, которые мы проектируем и строим.Их популярность в веб-дизайне никогда не была такой высокой; Краткость и универсальность пиктограмм, в частности, делают их идеальным выбором для больших и маленьких дисплеев.

Но у иконок в Интернете было немало проблем. У них было много времени, чтобы подготовиться к каждому предполагаемому размеру и цвету дисплея. Когда на рынке появились дисплеи с высоким разрешением, значки выглядели особенно низкими и блочными по сравнению с текстом, который они часто сопровождали.

Так что неудивительно, что иконочные шрифты стали таким хитом.Иконки, отображаемые через @ font-face , не зависели от разрешения и настраивались всеми способами, которые мы ожидали от текста. Конечно, предоставление значков в виде шрифта определенно было хитростью, но также было полезно, универсально и, возможно, даже немного весело.

Но теперь нам нужно остановиться. Пришло время передать иконочные шрифты в Hack Heaven, где они могут порезвиться с макетами на основе таблиц, пуленепробиваемыми закругленными углами и масштабируемыми заменами Flash Inman. Вот почему…

Устройства чтения с экрана действительно читают эту информацию

Большинство вспомогательных устройств будут читать вслух текст, вставленный с помощью CSS, и многие шрифты значков символов Unicode, от которых зависят, не являются исключением.В лучшем случае ваш «любимый» значок будет прочитан вслух как «черная любимая звезда». В худшем случае его читают как «труднопроизносимый» или полностью пропускают.

Они — кошмар, если ты страдаешь дислексией

Многие люди с дислексией считают полезным заменить шрифт веб-сайта чем-то вроде OpenDyslexic. Но иконочные шрифты также заменяются, что сильно затрудняет работу.

Они вторгаются на газон Emoji

В большинстве случаев мы полагаемся на автоматизированные инструменты, чтобы выбрать, какие символы Unicode назначены для какого значка.Но Unicode также является местом, где живут наши любимые смайлики. Если вы не будете осторожны, они могут сбивать с толку (хотя и забавно). Мой любимый пример: ошибка Etsy «четыре звезды и лошадь». Совсем недавно наш собственный Джейсон Григсби натолкнулся на случайные удары кулаками на сайте ESPN.

Они часто терпят неудачу

Когда ваш иконочный шрифт не работает, браузер обрабатывает его как любой другой шрифт и заменяет его запасным. В лучшем случае, вы тщательно выбрали запасных персонажей, и что-то странное, но коммуникативное по-прежнему загружается.В худшем случае (и гораздо чаще) пользователь видит что-то совершенно несочетаемое, обычно это ужасный глиф «отсутствующий символ».

Пользовательские шрифты не должны быть критически важными активами. Они все время терпят неудачу. Достаточно взглянуть на проблемы, связанные со значками в Bootstrap, и неудивительно, почему они полностью удаляют их из следующей версии.

Что еще хуже, многие пользователи никогда не увидят эти шрифты. Opera Mini, которая часто соперничает с iOS Safari по глобальной статистике использования с сотнями миллионов пользователей по всему миру, в большинстве случаев не поддерживает @ font-face .Opera рекомендует избегать шрифтов со значками, если вы хотите поддерживать Opera Mini.

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

Разноцветные иконки еще хуже. Техника наложения нескольких глифов для достижения эффекта впечатляюще изобретательна, но результаты часто выглядят так, как будто их регистрация печати смещена.

Вы, вероятно, делаете это неправильно

«Но Тайлер», — слышу вы.«Вы полностью проигнорировали шрифты Bulletproof Icon Fonts от Filament Group, вместе с тестами функций и разумными запасными решениями, основанными на содержании».

И вы правы. Эти техники великолепны! Если вы используете иконочный шрифт, вам обязательно следует следовать их рекомендациям до буквы.

Но вы, вероятно, не поймете.

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

Или, может быть, вы будете выполнять работу, проектируя и курируя собственный шрифт значков, тщательно выбирая символы Unicode, документируя и проповедуя важность реализации ваших значков доступным способом с соответствующими запасными вариантами. Затем однажды Дэйв забывает добавить резервное изображение к той иконографической кнопке, которую он добавил (которая, кстати, выглядит отлично, ), которую Роберта повторно использует для своего запроса на слияние, и, прежде чем вы это узнаете, ваше приложение превратилось в снова хрупкая, замусоренная пустошь.

Эти примеры не являются гипотетическими (хотя имена были изменены, чтобы защитить невиновных). Я видел, как это происходило во многих организациях, и все они исходили из самых лучших побуждений.

Лучше уже есть

SVG — это потрясающий для иконок! Это формат векторных изображений с дополнительной поддержкой CSS, JavaScript, возможностью повторного использования, специальных возможностей и многим другим. Это был , сделанный для такого рода вещей .

Но я слышу много оправданий тому, почему команды избегают его использования даже в совершенно новых проектах. Вот несколько…

«SVG нельзя объединять в спрайты».

Они вполне могут. Есть даже действительно отличные инструменты, такие как svg-sprite и IcoMoon, которые могут помочь автоматизировать этот процесс.

«SVG больше по размеру файла».

Обычно, когда я слышу это, команда сравнивает один двоичный значок шрифта с несколькими несжатыми файлами SVG.Разрыв резко сужается, когда вы оптимизируете свои SVG-файлы, объединяете повторно используемые в спрайты и доставляете те, которые имеют активное сжатие Gzip или встроены в страницу.

Иногда я слышал, что разрыв все еще слишком велик, когда включены сотни значков. Возникает вопрос: почему вы включаете сотню иконок на каждую страницу?

«По сравнению с этим разметка значка слишком подробна».

Сравним:

Разметка SVG чуть более подробна и более описательна и семантична, чем какой-либо пустой, скрытый ARIA элемент .

«Браузеры хуже поддерживают SVG.»

На момент написания этой статьи глобальная поддержка SVG на 96%… 4% на выше, чем на , чем тот же показатель для @ font-face . Кроме того, SVG намного более доступны, а их резервные варианты намного проще.

«Выбранный нами фреймворк уже имеет иконочный шрифт».

Если бы ваш фреймворк велел вам спрыгнуть с моста, вы бы это сделали?

Не будь «столовым парнем»

Я учился в школе, когда движение за веб-стандарты достигло критической отметки. В то время как большинство моих инструкторов видели достоинства семантической разметки и искренне восприняли ее, один с энтузиазмом выдержал . «Table Guy» утверждал, что никакой инструмент компоновки не может узурпировать