Шрифты с иконками: 50 лучших шрифтов с иконоками для веб-дизайна — Записки преподавателя

Как собрать шрифт с иконками — 2

С момента первого поста я доработал схему сборки, расскажу что и зачем там сделано. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».

Что вообще происходит

У дизайнера есть несколько разных способов передать иконки разработчику:

• отдельными файлами или спрайтом в ПНГ,
• отдельными файлами или спрайтом в СВГ,
• иконочным шрифтом.

Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Скетча автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.

Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP. NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.

Зачем это делать, есть же фонтелло

Есть много готовых сервисов, которые собирают шрифт по загруженным СВГ-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:

Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.

Хорошее решение — простое, в нем минимум ручных действий.

Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы СВГ и файлы шрифта, кто собирает и кому передает, как не забыть иконку.

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

Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.

Хорошее решение встраивается в процесс разработки.

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

Хорошее решение работает внутри компании.

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

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

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

Новое в этой версии &nbsp

Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и ЛЕСС-файл, а также опубликовать пакет в НПМ-репозиторий.

В новой версии мы научились ещё два важных пункта: поставлять иконки в виде скетч-библиотеки и ТТФ-файла. Я пройдусь по каждому изменению, а в конце приложу итоговое решение.

Поставка иконок в виде библиотеки Скетча

Описание работы библиотек

С момента написания того поста вышла новая версия Скетча — 47, в ней появились библиотеки символов. Иконки стало удобно вставлять в макеты именно с помощью библиотеки.

Чтобы сделать один символ на одну иконку и не плодить их для каждого цвета, нужно сделать так:

1. Сделайте по символу для каждого цвета, в которые у вас можно красить иконки.

2. Нарисуйте иконку и наложите её маской на символ цвета:

После этого вы сможете менять цвет иконок через оверрайды:

Образец файла: iconset.sketch

К сожалению такой скетч-файл плохо собирался в шрифт. Это происходит из-за маски.

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

Неожиданно Акронис написал пост на Хабре про свою дизайн-систему. С помощью их поста удалось сделать правильно. Сейчас наш сборщик регулярными выражениями вырезает лишнее из СВГ-файла и превращает файл с маской в обычный файл.

Для вырезания лишнего я подключил grunt-text-replace, вот его конфиг:

replace: {
  remove_mask: {
    src: [PATH_BUILD_ICONS + '/*.svg'],
     overwrite: true,  // overwrite matched source files
     replacements: [
      {from : / fill="(.*?)"/m,             to : ''},
      {from : /(\s*)<\/defs[\s\S]*<\/g>/m,  to : ''},
      {from : /(\s*)<defs>/m,               to : ''},
      {from : //m,               to : ''},
      {from : /xmlns:xlink="(.*?)"/m,       to : ''},
      {from : /(\s*)<g[\s\S]*?>/m,          to : ''},
      {from : /(\s*)<\/g>/m,                to : ''},
      {from : /<svg/m,                      to : '<svg fill="#000"'},
      {from : / transform="(.*?)"/m,        to : ''},
      {from : / fill-rule="(.*?)"/m,        to : ''},]            
    }
  }

Поставка иконок в виде ТТФ-файла

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

Раньше для вставки иконки они делали скриншот экрана, вырезали из него иконку и вставляли в руководство. Сказать, что это неудобный способ — ничего не сказать: растровые скриншоты плохо выглядят при печати; при изменении иконки нужно внимательно заменить все скриншоты с ней; сложно менять цвет иконок в растре, их приходится снимать в каждом цвете — это все увеличивает и без того большую работу.

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

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

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

В новой версии вместо автоматического выбора кодов символов я задаю их руками. Меинтейнер шрифтового репозитория (это я) выдает каждой новой иконке новый код и следит за тем, чтобы коды не менялись. Для этого используется секция codepoints в grunt-webfont. Каждой иконке нужно задать номер символа. У нас используется последовательная нумерация начиная с 0xF501.

codepoints : {
   'upload-to-cloud_24' : 0xF501,
   'upload-to-cloud_64' : 0xF502,
},
startCodepoint: 0xF701,

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

Посмотреть коды символов можно с помощью http://opentype. js.org. Выбираете Glyph Inspector, загружаете шрифт и смотрите:

Наши писатели перешли на ТТФ-файл и довольны.

Я обновил репозиторий решения, там есть пример файла и сборщик. Чтобы понять как и что — прочитайте README.md. Скачивайте и смотрите:
https://github.com/mikeozornin/icon-font-public

Что дальше

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

С вопросами, багрепортами или советами — в телеграм @mikeozornin или на почту [email protected].

Подключаем сторонние шрифты с иконками к SAPUI5-приложению

Привет, мои маленькие любители лёгкого БДСМ. В эфире передача «веселые истории с SAPUI5«. И сегодня мы рассмотрим, какие шаги нужно проделать, чтобы подключить шрифт с нужными нам иконками и использовать их при построении интерфейса. Тому що список стандартных иконок очень куцый, и иногда нужно добавить что-нибудь со стороны.

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

Первый — найти нормальную работу, и не маяться ерундой.

Второй (сложнее, но не сильно) — описан ниже.

Немного теории

На официальном демо-примере можем посмотреть как работают нативные иконки в этом фреймворке.

С точки зрения кода, иконки представлены классом sap.ui.core.Icon, остальные элементы экрана, в которых есть иконки, либо расширяют этот класс, либо содержат его внутри себя. Его конструктор принимает следующие основные аргументы:

И всё это чудо преобразовывается в следующую конструкцию при запуске:

SPAN, в котором в аттрибуте style явно объявлен нативный шрифт с иконками, и цвет, заданный в XML-конструкторе. Сам символ иконки лежит в аттрибуте data-sap-ui-icon-content, который с помощью css подставляется внутрь псеводэлемента ::before:

Зачем я это написал? Непонятно, т.

к. в этой информации нет ничего полезного.

Первым делом делаем что? Праавильно! Лезем в доку, где индусским по белому написано, что для использования кастомных шрифтов иконок нужно сделать несколько очень простых телодвижений:

1. Объявить font-face с нашими шрифтами в css
2. Каждую иконку, которую мы хотим использовать, нужно объявить с помощью метода sap.ui.core.IconPool.addIcon(iconName, collectionName, fontFamily, content)
3. Ссылаться в на объявленные иконки во всех местах, где очень чешется по следующему принципу: sap-icon://[collection-name]/[icon-name]

На этом можно было заканчивать, но давайте пример.

Пример

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

Я для примера буду пользовать готовую сборку иконок от fontawesome. Залезаем, качаем архив с исходниками. В бесплатной версии нам доступны только шрифты: brands, regular, solid.

В директории /webfonts собраны эти три шрифта в разных форматах. (Чтобы покрыть все популярные браузеры) -> Копируем эту директорию в корень нашего проекта.

Далее, идем по официальной инструкции:

Чтобы объявить шрифты из fontawesome нужно с каждым из его шрифтов провернуть следующее:

Лезем в css проекта.

1. Если нет .css файлов — создаём и объявляем его в manifest.json. Путь объявления в манифесте:
2. Смотрим в файл fontawesome/%fontname%.css
3. Копируем блок @font-face , в css проекта. Который будет примерно следующим:
4. Где-нибудь в коде (например, при инициализации Component.js, и желательно в отдельном файле) добавляем нужные нам иконки в пул: (Названия иконок и их символьные коды можно подсмотреть на сайте. )
5. Используем иконки при декларации каких-нибудь элементов экрана:

Кстати, названия всех иконок и их кодов удобно лежат в файле /scss/_variables.scss. И они вполне пригодны для автоматической обработки. Ну а шо, а вдруг.

Например, можно автоматически собрать все команды добавления в пул. (Не пытайтесь засунуть всю портянку в проект, это просто пример.)

Получим на выходе вот это:

Целый лонгрид о подключении шрифта… Ух.

На этом всё. Работает.

P.S. При тестировании внутри SAP WEB IDE на Internet Explorer

могут наблюдаться фантомные проблемы с отображением иконок. Но после деплоя — всё работает.

#javascript #sapui5

Образец

— Библиотека шрифтов значков

Шрифт значков CaGov включает 361 значок, которые вы можете использовать на своем сайте. Четыре различных формата шрифта включены для совместимости со всеми популярными браузерами. Возможно, вам потребуется добавить карту пантомимы на ваш веб-сервер для шрифта WOFF. Чтобы определить, нужен ли он вашему веб-серверу, загрузите файл /fonts/CaGov.woff на свой веб-сервер. Попробуйте загрузить WOFF в свой браузер, посетив: http://yourwebsite.ca.gov/fonts/CaGov.woff. Если вам будет предложено загрузить шрифт, ваш сервер настроен правильно. Если вы получаете 404 или другую ошибку, вам нужно добавить карту пантомимы для расширения «.woff», а тип mime — «application/font-woff». Если вам нужна помощь, обратитесь к администратору сервера.

CA-GOV-ICON-LOGO

E600

CA-GOV-ICON-HOME

E601

CA-GOV-ICON-MENU

E602

CA-GOV-ICON-APPS

E603

CA-GOV-ICON-SEARCH

E604

CA-GOV-ICON-Chat

E605

CA-GOV-ICON-CAPITOL

E606

CA-GOV-ICON-State

E607

CA- gov-icon-phone

e608

ca-gov-icon-email

e609

ca-gov-icon-contact-us

E66E

CA-GOV-ICON-CALENDAR

E60A

CA-GOV-ICON-BEAR

E60B

CA-GOV-ICON-BEAR

E90B

CA-GOV-ICON-BEAR

E90B

CA-GOV-ICon-Bear

E90B

-Bubble

E66F

CA-GOV-ICON-INFO-BUBBLE

E670

CA-GOV-ICON-FEEDURES

E993

CA-GOV-ICON-ACCESTICKINGAIL

E992

CA-gov-ICON

E992

CA-gov-ICON

E992

-язык жестов

e971

ca-gov-icon-agriculture

e973

CA-GOV-ICON-CANNABIS

E974

CA-GOV-ICON-ANGRY

E975

CA-GOV-ICON-HAPPY

E976

CA-GOV-VISA

E977

CA-GOV-VISA

E977

CA-GOV-ICON-MASTERCARD

E978

CA-GOV-ICON-AMEXCARD

E979

CA-GOV-ICON-Discovercard

E97B

CA-GOV-Paypal

E97C

CA-GOV-PAYPAL

E97C

CA-GOV-Paypal

E97C

CA-GOV-Paypal gov-icon-apple-pay

e97a

ca-gov-icon-chrome

e97d

ca-gov-icon-firefox

e97e

ca-gov-icon-ie

e97f

ca-gov-icon-opera

e980

ca-gov-icon-safari

e981

CA-GOV-ICON-BELL

E982

CA-GOV-ICON-Bookmark

E983

CA-GOV-ICON-Book

E086

CA-GOV-ICON-Books

E984

ca-gov-icon-reader

e985

ca-gov-icon-read-book

e655

CA-GOV-ICON-PALETTE

E986

CA-GOV-ICON-Glass

E987

CA-GOV-ICON HEART

E988

CA-GOV-ICON DIGNGING

E989

ca-gov-icon-gas-pump

e98a

ca-gov-icon-idea-alt

e98b

ca-gov-icon-medal

e98c

020d90-90s ca-gov-icon

ca-gov-icon-no-smoking

e98e

ca-gov-icon-biohazard

e918

CA-GOV-ICON-Malware

E919

CA-GOV-ICON-Radiation

E955

CA-GOV-ICON-CHEMICAL-HAZARD

E956

CA-gov-inger-ganger

e957

ca-gov-icon-do-not-sign

e958

ca-gov-icon-землетрясение

e959

ca-gov-icon-quake-hazard

e903b -quake-house

e959

ca-gov-icon-electricity-hazard

e95c

ca-gov-icon-flood

e95d

ca-gov-icon-hazard

e95e

ca-gov-icon-hurricane

e95f

e95f

ca-gov-0ris 2 ca-gov-0ris e960

ca-gov-icon-sea-level-rise-alt

e96e

ca-gov-icon-severe-weather

e961

ca-gov-icon-stop-fire 902 02 0002 e 900 -gov-icon-stop-hand

e963

ca-gov-icon-tornado

e964

ca-gov-icon-tsunami

E965

CA-GOV-ICON-TSUNAMI-ALT

E96F

CA-GOV-ICON-VOLCANO

E966

CA-GOV-ICON-TENT

E969

CA-GOV-ICON-CAMPFIR

E96A

CA-GOV-ICON-DAM

E96B

CA-GOV-ICON-HOURS

E90C

CA-GOV-ICON-HOURS-Security

E90D

CA-GOV-ICON-ALBUMSURENT

e90e

ca-gov-icon-brain

e90f

ca-gov-icon-certificate

E910

CA-GOV-ICON-Certificate-Check

E911

CA-GOV-ICON-Зарядка

E912

CA-GOV-ICON-CYCLE

E913

CA-GOV-ICon. -Пряна

E914

CA-GOV-ICON-CITY

E915

CA-GOV-ICON-CLOCK

E916

CA-GOV-ICON-Cloud-Gear

E917

CA-GOV -icon-cloud-services

e91a

ca-gov-icon-download-cloud

e96c

ca-gov-icon-upload-cloud

e96d

ca-gov-icon-cloud-sync

e91b

ca-gov-icon-code

e91c

3

E91D

CA-GOV-ICON-EAR-SLASH

E91E

CA-GOV-ICON-EYE

E91F

CA-GOV-ICON-E-E-SLASH

E920

CA-GOV-ICON. -file

e921

ca-gov-icon-file-audio

e922

ca-gov-icon-file-certificate

E923

CA-GOV-ICON-FILE-CHECK

E924

CA-GOV-ICON-FILE-CODE

E925

CA-GOV-ICON-FILE-CSV

E926

CA-GOV -icon-file-download

e927

ca-gov-icon-file-excel

e928

ca-gov-icon-file-export

e929

ca-gov-icon-0file-02 02 ca-gov-icon-0file-03 e92a

ca-gov-icon-file-invoice

e92b

ca-gov-icon-file-medical

e92c

ca-gov-icon-file-medical-alt

e92d

ca-gov-icon-file-pdf

e92e

ca-gov-icon-file-powerpoint

ca-gov

903f 903f -icon-file-prescription

e930

ca-gov-icon-file-upload

e931

ca-gov-icon-file-video

e932

ca-gov-icon-03-word e933

ca-gov-icon-file-zip

e934

ca-gov-icon-filter

e90a

ca-gov-icon-filter-solid

e935

ca-gov-icon-fingerprint

e936

ca-gov-icon-fingerprint-check

e937 9000ca

on e938

ca-gov-icon-hand-money

e939

ca-gov-icon-handshake

e93a

ca-gov-icon-institute

e93b

e93c

ca-gov-icon-medical-care

e93d

ca-gov-icon-medical-case

E93E

CA-GOV-ICON-MEDICEL-CLINIC

E93F

CA-GOV-ICON-MEDICAL-CROSS

E940

CA-GOV-ICON-MEDICAL-DOCTOR

E941

CA-gov-gov

E941

CA-gov. -ИКОН-МЕДИЧЕСКАЯ СЕЛКА

E942

CA-GOV-ICON-MEDICAL-PALLS

E943

CA-GOV-ICON-MOBILE

E944

CA-GOV-ICON-PRO-Services

E945

ca-gov-icon-puzzle

e946

ca-gov-icon-puzzle-piece

e947

ca-gov-icon-recycle

e948

ca-gov-icon-responsive

e949

ca-gov-icon-responsive-alt

e904a

e904a Сеть

E94B

CA-GOV-ICON-Security-SYSTEM

E94C

CA-GOV-ICON-SHIELD-CHECK

E94D

CA-GOV-ICON-TUMB-UP

E94E

CA-gov-icon-up-up

E94E

gov-icon-trophy

e94f

ca-gov-icon-users

e950

ca-gov-icon-users-alt

e951

ca-gov-icon-users-dialog

e952

ca-gov-icon-users-interaction

e953

-ca-gov-video-icon-video

E954

CA-GOV-ICON-SHARE-BUTTON

E671

CA-GOV-ICON-SHARE-EMAIL

E673

CA-GOV-ICON-FaceBook

E616

CA-GOV-ICON -share-facebook

e672

ca-gov-icon-twitter

e619

ca-gov-icon-share-twitter

E675

CA-GOV-ICON-SNAPCHAT

E990

CA-GOV-ICON-SHARE-SNAPCHAT

E98F

CA-GOV-ICON-LICKEDIN

E617

CA-GOV-ICON-SHARE

E617

CA-GOV-ICON-Share. -Linkedin

E676

CA-GOV-ICON-YOUTUBE

E618

CA-GOV-ICON-SHARE-YOUTUBE

E67B

CA-GOV-ICON-Pinterest

E61A

CA-gov-ICON

E61A

CA-gov-ICON

E61A

CA-gov-ICON -share-pinterest

e679

ca-gov-icon-vimeo

e61b

ca-gov-icon-share-vimeo

e67a

ca-gov-icon-instagram

e61c

ca-gov-icon-share-instagram

e60fcalickr-39-conicr-39-conicr-3

3

E61D

CA-GOV-ICON-SHARE-FLICKR

E674

CA-GOV-ICON-GOOGLE-PLUS

E66D

CA-GOV-ICON-SHARE-GOOGLEPLUS

E677

CA-gov- icon-правоприменение

e60c

ca-gov-icon-justice-legal

e60d

ca-gov-icon-at-sign

e60e

ca-gov-icon-attachment

e60f

ca-gov-icon-zip-file

e610-0icon-gov-power

900

E611

CA-GOV-ICON-EXCEL

E612

CA-GOV-ICON-WORD

E613

CA-GOV-ICON-PDF

E614

CA-GOV-ICON-PDF

E614

CA-GOV-ICON-SHARE

E6159

CA-GOV-ICON-SHARE 9000

E615

CA-GOV-ICON-SHARE 9000

E615

CA-GOV-ICON-PDF.

ca-gov-icon-microsoft

e61e

ca-gov-icon-apple

e61f

CA-GOV-ICON-ANDROID

E620

CA-GOV-ICON-COMPUTER

E621

CA-GOV-ICON-TABLET

E622

CA-GOV-ICON-SMARTPON ca-gov-icon-roadways

e624

ca-gov-icon-travel-car

e625

ca-gov-icon-travel-air

e626

ca-gov-03-truck-delivery-icon

e627

ca-gov-icon-construction

e628

ca-gov-icon-bar-chart

E629

CA-GOV-ICON-PIE-CHART

E62A

CA-GOV-ICON-GRAPH

E62B

CA-GOV-ICON-Server

E62C

CA-GOV-ICON ROALD СЛУЧАЕТСЯ

E62D

CA-GOV-ICON-Cloud-Download Load

E62E

CA-GOV-ICON-Cloud-Upload

E62F

CA-GOV-ICON-SHIELD

E630

CA-GOV-ICON -fire

e631

ca-gov-icon-бинокль

e632

ca-gov-icon-compass

E633

CA-GOV-ICON-SOS

E634

CA-GOV-ICON-SHOPPING CART

E635

CA-GOV-ICON-VIDEO-CAMERA

E636

CA-GOV-ICON -Камера

E637

CA-GOV-ICON-GREEN

E638

CA-GOV-ICON-LOUD-SPEAKER

E639

CA-GOV-ICON-AUDIO

E63A

CA-GOV-ICON. -print

e63b

ca-gov-icon-medical

e63c

ca-gov-icon-zoom-out

E63D

CA-GOV-ICON-Zoom-In

E63E

CA-GOV-ICON-IMPON-IMPORTANS

E63F

CA-GOV-ICON-CAT-Bubbles

E640

CA-GOV-ICON -call

E641

CA-GOV-ICON-PEOPLES

E642

CA-GOV-ICON-Person

E643

CA-GOV-ICON-ID-ID

E644

CA-GOV-ICON-ID

E644

CA-GOV-ICON. -платежная карта

e645

ca-gov-icon-skip-backwards

e646

ca-gov-icon-play

E647

CA-GOV-ICON-PAUSE

E648

CA-GOV-ICON-SKIP-FORWARD

E649

CA-GOV-ICON-MAIL

E64A

CA-GOV-ICON-MAGE

E64B

CA-GOV-ICON-House

E64C

CA-GOV-ICON-GEAR

E64D

CA-GOV-ICON-TOOL

E64E

CA-GOV-ICON-TIME

e64f

ca-gov-icon-cal

e650

ca-gov-icon-check-list

E651

CA-GOV-ICON-DOCUMENT

E652

CA-GOV-ICON-Clipboard

E653

CA-GOV-ICON-PAGE

E654

CA-GOV-CC-COPYRIGE

E656

CA-GOV-ICON-CA-CAPITOL

E657

CA-GOV-ICON-CA-State

E658

CA-GOV-ICON-Forwite

E659

CA-GOV-ICON-VICON- rss

e65a

ca-gov-icon-road-pin

e65b

ca-gov-icon-online-services

E65C

CA-GOV-ICON-LINK

E65D

CA-GOV-ICON-MAGNIFY-GLASS

E65E

CA-GOV-ICON-LOK

E660

CA-GOV-ICON-INFO

E661

CA-GOV-ICON-ERROW-UP-UP

E04B

CA-GOV-ICON-DOWN DOWN

E04C

CA-GOV-ICON -стрелка-влево

e04d

ca-gov-icon-стрелка-вправо

e04e

ca-gov-icon-carousel-prev

E666

CA-GOV-ICON-CAROUSEL-NEXT

E667

CA-GOV-ICON-ERROW-PREV

E668

CA-GOV-ICON-ERRW-NEXT

E669

CA-GOV-grow-next

E669

CA-GOV -icon-menu-toggle-closed

e66a

ca-gov-icon-menu-toggle-open

e66b

ca-gov-icon-carousel-play

e907

ca-gov-icon -pause

e66c

ca-gov-icon-search-right

55

ca-gov-icon-выпускник

E903

CA-GOV-ICON-BRIEFCASE

E901

CA-GOV-ICON-IMEARES

E904

CA-GOV-ICON-GEARS

E900

CA-GOV-ICON-TOOLS

E900

CA-GOV-ICON-TOOLS

CA-GOV-ICON-TOOLS 9000 3

E035

CA-GOV-ICON-PENCILL

6A

CA-GOV-ICON-PENCILE-EDIT

6C

CA-GOV-ICON-SCEANC e024

ca-gov-icon-table

e025

ca-gov-icon-flowchart

E0DF

CA-GOV-ICON BUILDING

E0FD

CA-GOV-ICON-Searching

E0F7

CA-GOV-ICON-WALLET

E0D8

CA-GOV-ICON-D-DAGS

CA-GOV-ICON-Tags

CA-GOV-ICON-TAGS

E07C

CA-GOV-ICON-CURRANGE

E0F3

CA-GOV-ICON-IDEA

E902

CA-GOV-ICON-Lightbulb

E072

CA-GOV-CALCUTULE

E072

CA-GOVICON-CALCUTULE

E072

CA-GOVICON-CALCULATUT

ca-gov-icon-drive

e0e5

ca-gov-icon-globe

E0E3

CA-GOV-ICON-HOURGLASS

E0E1

CA-GOV-ICON-MIC

E07F

CA-GOV-ICON-VOLUME

E069

CA-GOV-ICON-MUSIC

E069

CA-GOV-ICON-MUSIC

CA-GOV-ICON

CA-GOV-ICON

. e08e

ca-gov-icon-folder

e05c

ca-gov-icon-grid

e08c

ca-gov-icon-archive

e088

ca-gov-icon-contacts

e087

ca-gov-icon-drawer

e084

ca-gov-icon-map

e083

ca-gov-icon-pushpin

e082

ca-gov-icon-location

e081

ca-gov-icon-quote-fill

2 e06a Заполните

E064

CA-GOV-ICON-WARNING-Triangle

E063

CA-GOV-ICON-WARNing-Circle

E967

CA-GOV-ICON-WARNIN gov-icon-warning-fill

e062

ca-gov-icon-check-fill

e052

ca-gov-icon-close-fill

e051

ca-gov-icon-plus-fill

e050

ca-gov-icon-minus-fill

e04f

вставка-заполнение-вправо

e046

ca-gov-icon-caret-fill-left

e045

ca-gov-icon-caret-fill-down

e044

ca-gov-icon-caret заполнение

e043

ca-gov-icon-caret-fill-two-right

e04a

ca-gov-icon-caret-fill-two-left

e049

ca-gov-icon-caret-fill-two-down

e048

ca-gov-icon-caret-fill-two-up

e047

ca-gov-icon-arrow-fill -right

e03c

ca-gov-icon-arrow-fill-left

e03b

ca-gov-icon-arrow-fill-down

e03a

ca-gov-icon-arrow-fill-up

e039

ca-gov-icon-arrow-fill-left-down

e040

ca-gov-icon-arrow-fill-right-down

e03f

ca-gov-icon-arrow-fill-right-up

e03e

ca-gov-icon-arrow-fill-left-up

e03d

ca-gov-icon-triangle-line-right

49

ca-gov-icon-triangle-line-left

48

ca-gov-icon-triangle-line-up

46

ca-gov-icon-triangle-line-down

4 700

ca-gov-icon-caret-line-two-right

41

ca-gov-icon-caret-line-two-left

40

ca-gov-icon-caret-line-two- вниз

3f

ca-gov-icon-caret-line-two-up

3e

ca-gov-icon-caret-line-right

3d

ca-gov-icon-caret-line-left

3c

ca-gov-icon-caret-line-up

3a

ca-gov-icon-caret-line-down

3b

ca-gov-icon-important-line 90 0

03

ca-gov-icon-info-line

e905

ca-gov-icon-check-line

52

ca-gov-icon-question-line

e908

ca-gov-icon-close-line

51

ca-gov-icon-plus-line

50

ca-gov-icon-minus-line 2 ca-gov-0

3

-ИКОН-КВЕСТИЦИЯ

E909

CA-GOV-ICON-MINUS-MARK

4B

CA-GOV-ICON-PLUS-MARK

4C

CA-GOV-ICON-Collapse

58

CA -gov-icon-expand

59

ca-gov-icon-check-mark

4e

ca-gov-icon-close-mark

4d

ca-gov-icon-triangle-right

45

ca-gov-icon-triangle-left

44

ca-gov-icon-triangle-down 0 0 0 ca-gov-triangle-down

400902 -icon-triangle-up

42

ca-gov-icon-caret-two-right

39

ca-gov-icon-caret-two-left

38

ca-gov-careticon -two-down

37

ca-gov-icon-caret-two-up

36

ca-gov-icon-caret-right

35

ca-gov-icon-caret-left

34

ca-gov-icon-caret-up

32

ca-gov-icon-caret-down

33 33 Icon-Expand-All

E991

CA-GOV-ICON-COLLAPSE-ALL

E970

CA-GOV-ICON-DRAG

E972

CA-GOV-ICON-UPDATE

E994

TO SANER значок на вашу страницу, вставьте пустой тег span с именем класса для значка, который вы хотите использовать, например:

Когда значки используются с заголовками от h2 до H5 и некоторыми предварительно настроенными модулями, включаются стили для размера шрифта и цвета. При использовании где-либо еще вам нужно будет добавить стили для размера шрифта и цвета самостоятельно. Иконочные шрифты могут быть оформлены с использованием тех же правил css, которые используются для оформления любого другого текста на странице. Например, color: и font-size: измените цвет и размер значка.

Unicons: более 4500 бесплатных шрифтов и SVG-иконок

Найдите любой шрифт значка или значок SVG для любого дизайн-проекта. Доступ Unicons прямо из ваших любимых инструментов дизайна простым перетаскиванием и бросить, или с помощью React или Vue. Выберите один из четырех разных значков стили: линия, монохромный, сплошная и тонкая линия.

Руководство по библиотеке Explore для разработчиков

Начните использовать иконки в качестве шрифта

Теперь легко вставьте Unicons на свой сайт, вставив всего несколько строк кода.

1

Добавить стиль

Скопируйте приведенный выше код в раздел страниц, где вы хотите использовать эти значки.

2

Добавить значки

Найдите значок и поместите его в раздел HTML.

3

Придайте стиль своему значку

Выберите правильный значок и легко измените размер, цвет и тон значка.

Используйте в своих любимых стилях

Unicons доступны в четырех различных стилях, чтобы удовлетворить ваши потребности. потребности в дизайне. Осветите свои интерфейсы этими стилями.

Монохромный

Тонкий

Используется и любим сообществом.

Иконки Pixel Perfect

Пиксельный согласованный стиль дизайна во всех категориях.

4500+ Современные иконы

Множество иконок для использования в вашем следующем проекте

Веб-шрифты и SVG-шрифты

Всего одна строка кода для использования веб-шрифтов и SVG-шрифтов

21+ Категории

Доступно в популярных категориях

Ускорьте процесс разработки

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

Исследуйте библиотеку

Начните использовать Unicons с..

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

• Vue

• React

• Iconfonts

• SVG

• Figma

Доступ к Unicons напрямую из ваших любимых инструментов дизайна

Unicons доступны в плагинах в четырех разных стилях. Поиск и вставьте нужный значок, просто перетащив его.

Исследуйте плагины

Фигма

AdobeXD

Гугл документы

Окна

Канва

Иллюстратор

Microsoft Word

Мак

Популярные проекты теперь строятся с использованием наших активов и инструментов

«С активами креативного дизайна очень легко доносить свои идеи до заинтересованных сторон.