Как собрать шрифт с иконками — 2
С момента первого поста я доработал схему сборки, расскажу что и зачем там сделано. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».
Что вообще происходит
У дизайнера есть несколько разных способов передать иконки разработчику:
- отдельными файлами или спрайтом в ПНГ,
- отдельными файлами или спрайтом в СВГ,
- иконочным шрифтом.
Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Скетча автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.
Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.
NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.
Зачем это делать, есть же фонтелло
Есть много готовых сервисов, которые собирают шрифт по загруженным СВГ-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:
Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.
Хорошее решение — простое, в нем минимум ручных действий.
Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы СВГ и файлы шрифта, кто собирает и кому передает, как не забыть иконку.
Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.
Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.
Хорошее решение встраивается в процесс разработки.
Не всех устраивает внешний сервис. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.
Хорошее решение работает внутри компании.
Формируется не всё, что надо. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя.
Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.
Если не формировать вместе со шрифтом ЛЕСС-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.
Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.
Новое в этой версии  
Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и ЛЕСС-файл, а также опубликовать пакет в НПМ-репозиторий.
В новой версии мы научились ещё два важных пункта: поставлять иконки в виде скетч-библиотеки и ТТФ-файла. Я пройдусь по каждому изменению, а в конце приложу итоговое решение.
Поставка иконок в виде библиотеки Скетча
Описание работы библиотек
С момента написания того поста вышла новая версия Скетча — 47, в ней появились библиотеки символов.
Иконки стало удобно вставлять в макеты именно с помощью библиотеки.
Чтобы сделать один символ на одну иконку и не плодить их для каждого цвета, нужно сделать так:
- Сделайте по символу для каждого цвета, в которые у вас можно красить иконки.
- Нарисуйте иконку и наложите её маской на символ цвета:
После этого вы сможете менять цвет иконок через оверрайды:
Образец файла: 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:
Зачем я это написал? Непонятно, т.
Первым делом делаем что? Праавильно! Лезем в доку, где индусским по белому написано, что для использования кастомных шрифтов иконок нужно сделать несколько очень простых телодвижений:
- Объявить font-face с нашими шрифтами в css
- Каждую иконку, которую мы хотим использовать, нужно объявить с помощью метода sap.ui.core.IconPool.addIcon(iconName, collectionName, fontFamily, content)
- Ссылаться в на объявленные иконки во всех местах, где очень чешется по следующему принципу: sap-icon://[collection-name]/[icon-name]
На этом можно было заканчивать, но давайте пример.
Пример
Для начала нам нужен какой-нибудь шрифт с иконками. Можно запаковать любые свои векторные изображения в шрифт, если очень хочется. Благо, для этого существует бесконечное количество утилит. Гуглите.
Я для примера буду пользовать готовую сборку иконок от fontawesome.
Залезаем, качаем архив с исходниками. В бесплатной версии нам доступны только шрифты: brands, regular, solid.
В директории /webfonts собраны эти три шрифта в разных форматах. (Чтобы покрыть все популярные браузеры) -> Копируем эту директорию в корень нашего проекта.
Далее, идем по официальной инструкции:
Чтобы объявить шрифты из fontawesome нужно с каждым из его шрифтов провернуть следующее:
Лезем в css проекта.
- Если нет .css файлов — создаём и объявляем его в manifest.json. Путь объявления в манифесте:
- Смотрим в файл fontawesome/%fontname%.css
- Копируем блок @font-face
- Где-нибудь в коде (например, при инициализации Component.js, и желательно в отдельном файле) добавляем нужные нам иконки в пул:
(Названия иконок и их символьные коды можно подсмотреть на сайте.
) - Используем иконки при декларации каких-нибудь элементов экрана:
)Кстати, названия всех иконок и их кодов удобно лежат в файле /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-iconca-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-gov903f 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
E61ACA-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
E614CA-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
e64fca-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
Мак
Популярные проекты теперь строятся с использованием наших активов и инструментов
«С активами креативного дизайна очень легко доносить свои идеи до заинтересованных сторон.