Иконки шрифты: Font Awesome — иконочный шрифт и CSS-инструментарий

Попробуйте Foundation

Если вы еще не пробовали Foundation, мы настоятельно рекомендуем его.Вы будете кодировать быстрее и лучше в кратчайшие сроки!

Мысли?

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

Ищете старый набор?

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

Иконочных шрифтов · GitHub

иконок шрифтов | FontSpace

• Темный режим
• Помощь Войти

• Шрифты
• Стили
• Коллекции
• Генератор шрифтов
• (͡ ° ͜ʖ ͡ °)
• Дизайнеры
• Материал

153 бесплатных шрифта

Связанные стили

• Симпатичные

• Современные

• Логотип

• Контур

• Сердце

• Элегантный

b

• Элегантный

5
5 Базовый
5 Декоративный

• Цвет

• Фигуры

• Социальные сети

• Логотип

• Рамки

• Символы

• Иконки в социальных сетях

• Иконки со шрифтом

• Цифровой

• Смайлы

• Facebook

• Флаги

• Google

• Не Unicode

5 9 Символ ictures

• Арабский

• Арт

• Кнопки

• Рисунки

• Лицевая сторона шрифта

Коммерческое использование

Сортировать по

• Популярные
• В тренде
• Новейший
• Имя

Личное использование Бесплатно

109.7k загрузок

Personal Use Free

413,5k загрузок

Личное использование Бесплатно

1126 загрузок

Личное использование Бесплатно

27812 загрузок

Личное использование Бесплатно

6683 загрузки

Личное использование Бесплатно

27350 загрузок

Личное использование Бесплатно

20681 загрузок

100% бесплатно

5805 загрузок

Личное использование Бесплатно

12734 загрузки

Личное использование Бесплатно

14638 загрузок

Личное использование Бесплатно

3843 загрузки

Личное использование Бесплатно

13871 загрузок

Личное использование Бесплатно

11464 загрузки

Личное использование Бесплатно

12905 загрузок

Личное использование Бесплатно

8541 загрузок

от 1 до 15 из 153

• Справка
• Контакты
• Бренд
• Конфиденциальность
• Условия
• DMCA
• Fonts

©

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

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

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

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

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

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

Большинство вспомогательных устройств будут читать вслух текст, вставленный с помощью 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» утверждал, что никакой инструмент компоновки не может узурпировать

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

Table Guy и я поддерживали связь. Сегодня он открыто признает, что ошибался насчет CSS. Ему неловко оттого, что он был так женат на технике, которая в ретроспективе была явно незаконно присвоена.

Если вы не перестанете использовать иконочные шрифты для людей с программами чтения с экрана, людей с дислексией, людей с браузерами, не поддерживающими @ font-face , людей, которые случайно не загрузили иконочный шрифт один раз для некоторых причина, или дизайнеры, которые просто хотят, чтобы их значки выглядели правильно на экране…

Тогда сделай сам.Не будь застольным парнем.

иконок веб-шрифтов | Стили и внешний вид пользовательского интерфейса Kendo

Начиная с выпуска R1 2017, Kendo UI предоставляет интегрированные значки шрифтов, предназначенные для веб-приложений, и виджеты визуализации данных пакета. В настоящее время доступно 577 иконок.

Эти значки можно использовать непосредственно в веб-проекте Kendo UI, назначив один из предопределенных классов CSS, представленных в списке значков шрифтов ниже. В следующем примере показано, как добиться такого поведения.

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

  
          Копировать
    
  

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

Использование шрифтов значков в пользовательском интерфейсе естественным образом заменяет устаревшую технику спрайтов значков.

Значки шрифтов демонстрируют значительные преимущества, такие как:

• Улучшенная масштабируемость. Хотя спрайты значков представляют собой растровые изображения и плохо масштабируются, в шрифтах значков используется векторная графика, они идеально выглядят на дисплеях Retina и делают масштабирование столь же простым, как установка параметра конфигурации font-size .
• Улучшенные возможности дизайна. Вы можете легко применять эффекты CSS на лету, задавая цвет текста, тень или другие параметры для различных состояний взаимодействия. Например, на : наведите курсор на .
• Улучшенная поддержка браузера. Значки шрифтов не зависят от браузера и поддерживаются всеми современными браузерами.
• Уменьшенное количество HTTP-запросов. Чтобы загрузить иконочный шрифт, вам потребуется максимум несколько HTTP-запросов.
• Уменьшенный размер файла — файл размером 100 КБ содержит примерно 500 векторных значков.

Чтобы использовать значки шрифтов Kendo UI:

1. Загрузите тему Kendo UI в свой проект.

2. Назначьте тегу HTML k-icon класс CSS, за которым следует предопределенный класс из списка значков шрифтов. Например, элемент , как показано в следующем примере.

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

   

<стиль>
    .my-custom-icon-class: before {
        content: "\ e13a"; / * Добавляет глиф, используя номер символа Unicode * /
    }
 
  

Шрифты

Icon поддерживают следующие параметры для улучшения визуального восприятия:

Регулировка размера

Значки шрифтов Kendo UI созданы на основе сетки 16 пикселей. Чтобы добиться идеального отображения значков, увеличивайте масштаб, сохраняя размер в 16 единиц (32, 48, 64 и т. Д.).

Вы можете масштабировать значки, просто установив параметр конфигурации font-size .

   
 
 
 

<стиль>
    .k-icon-32 {
        размер шрифта: 32 пикселя; / * Устанавливает размер значка 32 пикселя * /
    }

    .k-icon-48 {
        размер шрифта: 48 пикселей; / * Устанавливает размер значка 48 пикселей * /
    }

    .k-icon-64 {
        размер шрифта: 64 пикселей; / * Устанавливает размер значка в 64 пикселя * /
    }
 
  

Настройка цветов

Чтобы установить цвет значка, используйте свойство color CSS.

   
 

<стиль>
    .colored-icon {
        цвет: зеленый;
    }

  

Применение перелистывания

Чтобы лучше разместить значок в приложении, переверните его с помощью предопределенных классов CSS k-flip-h и k-flip-v .

Значки шрифтов отсортированы по группам в зависимости от функции, которую они помогают вам проиллюстрировать.

Действия

• .k-i-undo
• .k-i-redo
• .k-i-reset
• .k-i-reload
  .k-i-refresh
  .k-i-повторение
• .k-i-неповторение
• .k-i-reset-sm
• .k-i-reload-sm
  .k-i-refresh-sm
  .k-i-повторение-sm
• .k-i-часы
• .k-i-Calendar
• .k-i-save
  .k-i-floppy
• .k-i-print
  .k-i-printer
• .k-i-edit
  .k-i-Pencil
• .k-i-delete
  .k-i-trash
• .k-i-attachment
  .k-i-clip
• .k-i-attachment-45
  .k-i-clip-45
• .k-i-link-horizontal
  .k-i-hyperlink
• .k-i-unlink-horizontal
  .k-i-hyperlink-remove
• .k-i-link-vertical
• .k-i-unlink-vertical
• .k-i-замок
• .k-i-unlock
• .k-i-set-column-position
• .K-i-Stick
• .k-i-unstick
• .k-i-cancel
• .k-i-cancel-outline
• .k-i-cancel-circle
• .k-i-check
  .k-i-checkmark
• .k-i-check-outline
  .k-i-checkmark-outline
  .k-i-success
• .k-i-check-circle
  .k-i-checkmark-circle
.
• .k-i-close
  .k-i-x
• .k-i-close-outline
  .k-i-x-outline
  .k-i-error
• .k-i-close-circle
  .к-я-х-круг
• .k-i-plus
• .k-i-plus-outline
• .k-i-plus-circle
• .k-i-minus
  .k-i-kpi-trend-equal
• .k-i-minus-outline
• .k-я-минус-круг
• .k-i-div
• .k-i-equal
• .k-i-not-equal
• .k-i-less-or-equal
• .k-i-больше-или-равно
• .k-i-sort-asc
• .k-i-sort-desc
• .k-i-unsort
• .k-i-sort-clear
• .k-i-sort-asc-sm
• .k-i-sort-desc-sm
• .k-i-фильтр
• .k-я-фильтр-прозрачный
• .k-i-filter-sm
• .k-я-фильтр-сортировка-asc-sm
• .k-i-filter-sort-desc-sm
.
• .k-i-фильтр-добавить-выражение
• .k-я-фильтр-добавление-группа
• .k-i-login
• .k-i-logout
• .k-i-download
• .k-i-upload
• .k-i-hyperlink-open
• .k-i-hyperlink-open-sm
• .k-i-launch
• .k-i-window
  .k-i-window-maximize
• .k-i-windows
  .k-i-window-restore
  .k-i-tile
• .k-i-window-минимизировать
• .k-i-gear
  .k-i-cog
  .k-i-custom
.
• .k-i-gears
  .k-i-cogs
• .k-i-wrench
  .k-i-settings
.
• .k-i-preview
  .k-i-eye
• .k-i-zoom
  .k-i-search
• .k-i-zoom-in
• .k-i-zoom-out
• .k-i-pan
  .k-i-move
• .k-i-hand
• .k-i-cursor
• .k-i-Calculator
• .k-i-cart
  .k-i-shopping-cart
• .k-i-коннектор
• .k-i-plus-sm
• .k-i-minus-sm
• .k-i-kpi-status-deny
• .k-i-kpi-status-hold
• .k-i-kpi-status-open
• .k-i-штрих-код
• .k-i-barcode-outline
• .k-i-сканер штрих-кода
• .k-i-qr-код
• .k-i-qr-code-outline
• .k-i-QR-код-сканер
• .k-i-сканер-штрих-кода-QR-код-сканер
• .k-i-подпись
• .k-i-accessibility
• .k-i-export
• .k-i-import

Оповещения и уведомления

• .k-i-notification
  .k-i-bell
• .k-i-information
  .k-i-info
• .k-i-question
  .k-i-help
• .k-i-warning
  .k-i-exception

Монтаж

• .k-i-page-properties
• .k-i-bold
• .k-i-italic
• .k-i-underline
• .k-i-font-family
• .k-i-цвет переднего плана
• .k-i-convert-нижний регистр
• .k-i-convert-uppercase
• .k-i-strikethrough
• .k-i-sub-script
• .k-i-sup-скрипт
• .k-i-div
• .k-i-all
• .k-i-h2
• .k-i-h3
• .k-i-h4
• .k-i-h5
• .k-i-h5
• .k-i-h6
• .k-i-list-order
  .k-i-list-numbered
• .k-i-list-unordered
  .k-i-list-bulleted
• .k-i-list-roman-upper
• .k-i-list-roman-lower
• .k-i-indent-увеличение
  . k-i-indent
• .k-i-indent-reduce
  .k-i-outdent
• .k-i-insert-up
  .k-i-insert-top
• .k-i-insert-middle
• .k-i-insert-down
  .k-i-insert-bottom
• .k-i-align-top
• .k-i-align-middle
• .k-i-align-bottom
• .k-i-align-left
• .k-i-align-center
• .k-i-align-right
• .k-i-align-justify
• .k-i-align-remove
• .k-i-text-wrap
• .k-i-rule-horizontal
• .k-i-table-position-left
• .k-i-table-position-center
• .k-i-table-position-right
• .k-i-table-align-top-left
• .k-i-table-align-top-center
• .k-i-table-align-top-right
• .k-i-table-align-middle-left
• .k-i-table-align-middle-center
• .k-i-table-align-middle-right
• .k-i-table-align-bottom-left
• .k-i-table-align-bottom-center
• .k-i-table-align-bottom-right
• .k-i-table-align-remove
• .k-я-границы-все
• .k-i-border-за пределами
• .k-я-границы-внутри
• .k-i-border-inside-horizontal
• .k-i-border-inside-vertical
• .k-i-border-top
• .k-i-border-bottom
• .k-i-border-left
• .k-i-border-right
• .k-i-border-no
• .k-я-границы-показать-скрыть
• .k-i-form
  .k-i-border
• .k-i-form-element
• .k-i-code-snippet
• .k-i-select-all
• .k-i-button
• .k-i-select-box
• .k-i-calendar-date
.
• .k-i-group-box
• .k-i-textarea
• .k-i-textbox
• .k-я-текстовое поле-скрытый
• .k-i-пароль
• .k-i-paragraph-add
• .k-i-edit-tools
• .k-я-шаблон-менеджер
• .k-i-change-вручную
• .k-i-track-change
• .k-i-track-changes-enable
.
• .k-i-track-changes-accept
• .k-i-track-changes-accept-all
• .k-i-track-changes-отклонить
• .k-i-track-changes-reject-all
• .k-i-document-manager
• .k-i-custom-icon
• .k-я-словарь-добавить
• .k-i-image-light-dialog
  .k-i-image-insert
• .k-я-изображение-редактировать
• .k-я-редактор изображений-карт
• .k-i-comment
• .k-я-комментарий-удалить
• .k-я-комментарии-удалить-все
• .k-i-silverlight
• .k-i-media-manager
• .k-i-video-external
• .k-i-flash-менеджер
• .k-i-найти-и-заменить
  .k-i-find
• .k-i-copy
  .k-i-files
• .k-i-cut
• .k-i-paste
• .k-i-paste-as-html
.
• .k-i-paste-from-word
• .k-i-paste-from-word-strip-file
• .k-i-paste-html
.
• .k-i-paste-markdown
• .k-i-paste-plain-text
• .k-i-apply-format
• .k-i-clear-css
.
• .k-i-copy-format
• .k-i-strip-all-formating
• .k-i-strip-css-формат
• .k-i-strip-font-elements
• .k-i-strip-span-elements
• .k-i-strip-word-formatting
• .k-i-формат-код-блок
• .k-i-style-builder
• .k-я-модуль-менеджер
• .k-i-hyperlink-light-dialog
  .k-i-hyperlink-insert
• .k-i-hyperlink-глобус
• .k-я-гиперссылка-глобус-удалить
• .k-i-hyperlink-email
.
• .к-я-якорь
• .k-i-table-light-dialog
  .k-i-table-insert
• .k-i-table
  .k-i-table-unmerge
• .k-я-таблица-свойства
• .k-i-table-cell
• .k-я-свойства-таблицы-ячейки
• .k-я-таблица-столбец-вставка-слева
• .k-i-таблица-столбец-вставка-справа
• .k-i-table-row-insert-выше
• .k-i-table-row-insert-below
• .k-я-таблица-столбец-удалить
• .k-я-таблица-строка-удалить
• .k-я-таблица-ячейка-удалить
• .k-я-таблица-удалить
• .k-я-ячейки-слияние
• .k-я-ячейки-слияние-по горизонтали
• .k-i-cell-merge-вертикально
• .k-i-cell-split-Horizontally
.
• .k-i-cell-split-vertical
• .k-i-pane-freeze
• .k-i-row-freeze
• .k-i-column-freeze
• .k-i-toolbar-float
• .k-i-проверка орфографии
• .k-i-validation-xhtml
.
• .k-i-данные-валидации
• .k-i-toggle-полноэкранный режим
• .k-я-формула-FX
• .k-i-sum
• .k-i-symbol
• .k-i-доллар
  .k-i-currency
• .k-i-процент
• .k-i-custom-format
• .k-i-десятичное-увеличение
• .k-i-десятичное-уменьшение
• .k-i-font-size
• .k-i-image-absolute-position
• .k-i-strip-all-formatting
• .k-i-crossstab
• .k-i-table-body
• .k-я-таблицы-столбцы-группы
• .k-i-стол-уголок
• .k-i-таблицы-строки-группы

Файлы и папки

• .k-i-папка
• .k-i-folder-open
• .k-i-folder-add
• .k-i-folder-up
• .k-i-folder-more
  .k-i-fields-more
• .k-я-агрегат-поля
• .k-i-file
  .k-i-file-vertical
• .k-i-file-add
• .k-i-file-txt
  .k-i-txt
• .k-i-file-csv
  .k-i-csv
• .k-i-file-excel
  .k-i-file-xls
  .k-i-excel
  .k-i-xls
• .k-i-file-word
  .k-i-file-doc
  .k-i-word
  .k-i-doc
• .k-i-file-mdb
  .k-i-mdb
• .k-i-file-ppt
  .k-i-ppt
• .k-i-file-pdf
  .k-i-pdf
• .k-i-file-psd
  .k-i-psd
• .k-i-файл-флэш
  .k-i-флэш
• .k-i-file-config
  .k-i-config
• .k-i-file-ascx
  .k-i-ascx
• .k-i-file-bac
  .k-i-bac
• .k-i-file-zip
  .k-i-zip
• .k-i-film
• .k-i-css3
• .k-i-html5
• .k-i-html
  .k-i-source-code
  .k-i-view-source
• .k-i-css
• .k-i-js
• .k-i-exe
• .k-i-csproj
• .k-i-vbproj
• .k-i-cs
• .k-i-vb
• .k-i-sln
• .k-i-cloud
• .k-i-file-horizontal
• .k-i-subreport
• .k-i-data
• .k-i-report-header-section
• .k-i-report-footer-section
• .k-я-группа-заголовок-раздел
• .k-i-group-footer-section
• .k-i-page-header-section
• .k-i-page-footer-section
• .k-i-detail-section
• .k-i-toc-section
• .k-i-group-section
• .k-i-parameters
• .k-i-data-csv
• .k-i-data-json
• .k-я-данные-sql
• .k-i-data-web
• .k-i-group-collection
.
• .k-i-параметр-логический
• .k-я-параметр-дата-время
• .k-i-параметр-float
• .k-i-параметр-целое число
• .k-i-строка-параметров
• .k-i-параметры-байтовый-массив
• .k-я-параметры-неизвестно
• .k-i-toc-section-level
• .k-i-унаследованный
• .k-я-файл-видео
• .k-я-файл-аудио
• .k-i-файл-образ
• .k-i-файл-презентация
• .k-i-файл-данные
• .k-я-файл-образ диска
• .k-i-файл-программирование
• .k-я-файл-ошибка
• .k-я-файлы-ошибка
• .k-i-data-rest
• .k-i-файл-машинописный текст

Изображения

• .k-i-photo-camera
• .k-i-image
  .k-i-photo
• .k-i-images
• .k-i-image-export
  .k-i-photo-export
• .k-i-zoom-фактический размер
• .k-i-zoom-best-fit
• .k-я-изображение-изменение размера
• .k-i-crop
• .k-i-зеркало
• .k-i-flip-horizontal
• .k-i-flip-vertical
• .k-i-rotate
• .k-i-rotate-right
• .k-i-rotate-left
• .k-i-brush
• .k-i-palette
• .k-i-paint
  .k-i-droplet
  .k-i-background
• .k-i-line
  .k-i-shape-line
• .k-i-яркость-контраст
• .k-я-насыщенность
• .k-я-инвертировать цвета
• .k-i-transperancy
  .k-i-opacity
• .k-i-greyscale
• .k-i-blur
• .k-i-точилка
• .k-i-shape
• .k-i-round-corners
• .k-i-front-element
• .k-i-back-element
• .k-i-forward-element
• .k-i-backward-element
• .k-i-align-left-element
• .k-i-align-center-element
• .k-i-align-right-element
• .k-i-align-top-element
• .k-i-align-средний-элемент
• .k-i-align-bottom-element
• .k-i-align-stretch-element-horizontal
.
• .k-i-align-stretch-element-vertical
.
• .k-i-align-align-left-elements
• .k-i-align-center-elements
• .k-i-align-right-elements
• .k-i-align-stretch-elements-horizontal
• .k-i-align-baseline-horizontal
• .k-i-align-top-elements
• .k-i-align-middle-elements
• .k-i-align-bottom-elements
• .k-i-align-stretch-elements-vertical
• .k-i-align-baseline-vertical
• .k-i-justify-start-horizontal
• .k-i-justify-center-horizontal
• .k-i-justify-end-horizontal
• .k-i-justify-between-horizontal
• .k-i-justify-around-horizontal
• .k-i-justify-start-вертикальный
• .k-i-justify-center-vertical
• .k-i-justify-end-vertical
• .k-i-justify-between-vertical
• .k-i-justify-around-vertical
• .k-i-thumbnail-up
• .k-i-thumbnail-right
• .k-i-thumbnail-down
• .k-i-thumbnail-left
• .k-i-full-screen
  .k-i-full-screen
• .k-i-full-screen-exit
  .k-i-full-screen-exit
• .k-i-reset-color
  .k-i-paint-remove
  .k-i-background-remove
• .k-i-align-to-grid
• .k-i-size-to-grid
• .k-i-make-same-size
• .k-i-make-same-width
• .k-i-make-same-height
• .k-i-make-horizontal-spacing-equal
• .k-i-Увеличить расстояние по горизонтали
• .k-i-reduce-horizontal-spacing
• .k-i-remove-horizontal-spacing
• .k-i-make-vertical-spacing-equal
• .k-i-увеличить-вертикальный-интервал
• .k-i-reduce-vertical-spacing
• .k-i-remove-vertical-spacing
• .k-i-eyedropper
• .k-i-snap-сетка
• .k-i-snap-to-gridlines
• .k-i-snap-to-snaplines
• .k-i-sizes

Расположение и навигация

• .k-i-arrow-45-up-right
  .k-i-collapse-ne
  .k-i-resize-ne
• .k-i-arrow-45-down-right
  .k-i-collapse-se
  .k-i-resize-se
• .k-i-arrow-45-down-left
  .k-i-collapse-sw
  .k-i-resize-sw
• .k-i-arrow-45-up-left
  .k-i-collapse-nw
  .k-i-resize-new
• .k-i-arrow-60-up
  .k-i-kpi-trend-увеличение
• .k-i-arrow-60-right
• .k-i-arrow-60-down
  .k-i-kpi-тренд-уменьшение
• .k-i-arrow-60-слева
• .k-i-arrow-end-вверх
• .k-i-arrow-end-right
• .k-i-arrow-end-down
• .k-i-arrow-end-left
• .k-i-arrow-double-60-up
• .k-i-arrow-seek-up
• .k-i-arrow-double-60-right
  .k-i-forward-sm
• .k-i-arrow-seek-right
• .k-i-arrow-double-60-down
• .k-i-arrow-seek-down
• .k-i-arrow-double-60-left
  .k-i-rewind-sm
• .k-i-стрелки-kpi
  .k-i-kpi
• .k-i-стрелки-без изменений
• .k-i-arrow-overflow-вниз
• .k-i-arrow-chevron-up
• .k-i-arrow-chevron-right
• .k-i-arrow-chevron-down
• .k-i-arrow-chevron-left
• .k-i-arrow-up
• .k-i-arrow-right
• .k-i-arrow-down
• .k-i-arrow-left
• .k-i-arrow-дрель
• .k-i-arrow-parent
• .k-i-корень-стрелка
• .k-я-стрелки-изменение размера
• .k-i-стрелки-размеры
• .k-i-стрелки-своп
• .k-i-drag-and-drop
• .k-i -ategorize
• .k-i-grid
• .k-i-grid-layout
• .k-i-group
• .k-i-ungroup
• .k-i-handler-drag
• .k-i-layout
• .k-i-layout-1-by-4
• .k-i-layout-2-by-2
• .k-i-layout-side-by-side
• .k-i-layout-stacked
• .k-i-columns
• .k-i-rows
• .k-i-reorder
• .k-i-menu
• .k-i-more-vertical
• .k-i-more-horizontal
• .k-i-home
• .k-i-overlap

Отображение

• .k-я-глобус-контур
• .k-i-Glo
• .k-i-marker-pin
• .k-i-marker-pin-target
• .k-i-контактный
• .k-i-unpin

Медиа

• .k-i-play
• .k-i-pause
• .k-i-stop
• .k-i-rewind
• .k-i-forward
• .k-i-volume-down
• .k-i-volume-up
• .k-i-volume-off
• .k-i-hd
• .k-i-субтитры
• .k-i-плейлист
• .k-i-audio

Обмен в соцсетях

• .k-i-share
• .k-я-пользователь
• .k-i-inbox
• .k-i-blogger
.
• .k-i-blogger-box
.
• .k-i-Delicious
• .k-i-Delicious-box
• .k-i-digg
• .k-i-digg-box
• .k-i-email
  .k-i-envelop
  .k-i-letter
• .k-i-email-box
  .k-i-envelop-box
  .k-i-letter-box
• .k-i-facebook
• .k-i-facebook-box
• .k-i-google
• .k-i-google-box
• .k-i-google-plus
• .k-i-google-plus-box
• .k-i-linkedin
• .k-i-linkedin-box
• .k-i-myspace
• .k-i-myspace-box
• .k-i-pinterest
• .k-i-pinterest-box
• .k-i-reddit
.
• .k-i-reddit-box
.
• .k-я-наткнулся на
• .k-i-stumble-on-box
• .k-я-расскажи-другу
• .к-я-расскажи-другу-ящик
• .k-i-tumblr
• .k-i-tumblr-box
• .k-i-twitter
• .k-i-twitter-box
• .k-i-yammer
• .k-i-yammer-box
• .k-я-поведение
• .k-я-поведение-бокс
• .k-i-dribbble
• .k-i-dribbble-box
• .k-i-rss
• .k-i-rss-box
• .k-i-vimeo
• .k-i-vimeo-box
• .k-i-youtube
• .k-i-youtube-box

Переключить

• .k-i-heart-outline
  .k-i-fav-outline
  .k-i-избранное-outline
• .k-i-heart
  .k-i-fav
  .k-i-любимый
• .k-i-star-outline
  .k-i-bookmark-outline
• .k-i-star
  .k-i-bookmark
• .k-i-checkbox
  .k-i-shape-rect
• .k-i-checkbox-checked
• .k-i-tri-state-undeterminate
• .k-i-tri-state-null
• .k-i-circle
• .k-i-radiobutton
  .k-i-shape-circle
• .k-i-radiobutton-checked

Графики

• .k-i-graph
• .k-i-кластеризованный по столбцам
• .k-i-column-stacked
• .k-i-column-stacked100
• .k-i-диапазон-столбцов
• .k-i-bar-кластеризованный
• .k-i-bar-stacked
• .k-i-bar-stacked100
• .k-i-bar-диапазон
• .k-i-кластеризованная область
• .k-i-area-stacked
• .k-i-area-stacked100
• .k-i-area-range
• .k-i-line-stacked
• .k-i-line-stacked100
• .k-i-line-markers
• .k-i-line-stacked-markers
• .k-i-line-stacked100-markers
• .k-i-pie
• .k-i-donut
• .k-i-scatter
• .k-i-scatter-smooth-lines-markers
• .k-i-scatter-smooth-lines
• .k-i-scatter-прямые-маркеры
• .k-i-scatter-прямые
• .k-i-bubble
• .k-i-подсвечник
• .k-i-bar
• .k-i-radar
• .k-i-radar-markers
• .k-i-радар-заполненный
• .k-i-rose
• .k-i-choropleth

Nerd Fonts — агрегатор культовых шрифтов, коллекция глифов / значков и средство исправления шрифтов

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 год 22 23 24 25 26 27 28 год 29 30 31 год 32 33 34 35 год 36 37 38 39 40 41 год 42 43 год 44 год 45 46 47 48 49 50 51 52 53 54 55 56 57 год 58 59 60 61 62 63

./ font-patcher использование: font-patcher [-h] [-v] [-s] [-l] [-q] [-w] [-c] [- осторожно] [--removeligs] [--postprocess [ПОСТПРОЦЕСС]] [--configfile [КОНФИГУРАЦИЯ]] [--пользовательский [ПОЛЬЗОВАТЕЛЬСКИЙ]] [-ext [РАСШИРЕНИЕ]] [-out [OUTPUTDIR]] [--progressbars | --no-progressbars] [--fontawesome] [--fontawesomeextension] [--fontlinux] [--octicons] [--powersymbols] [--pomicons] [--powerline] [--powerlineextra] [--material] [--weather] шрифт Nerd Fonts Font Patcher: исправляет данный шрифт с помощью глифов, связанных с программированием и разработкой. * Веб-сайт: https: // www.nerdfonts.com * Версия: 2.1.0-альфа * Веб-сайт разработки: https://github.com/ryanoasis/nerd-fonts * Журнал изменений: https://github.com/ryanoasis/nerd-fonts/blob/master/changelog.md позиционные аргументы: font Путь к шрифту для исправления (например, Inconsolata.otf) необязательные аргументы: -h, --help показать это справочное сообщение и выйти -v, --version показать номер версии программы и выйти -s, --mono, --use-single-width-glyphs Следует ли генерировать глифы как с одинарной шириной, а не с двойной шириной (по умолчанию - с двойной шириной) -l, --adjust-line-height Отрегулировать ли высоту линии (попытаться центрировать разделители линий электропередач более равномерно) -q, --quiet, --shutup Не генерировать подробный вывод -w, --windows Ограничить внутреннее имя шрифта до 31 символа (для совместимости с Windows) -c, --complete Добавить все доступные символы --careful Не перезаписывать существующие глифы, если обнаружены --removeligs, --removeligatures Удаляет лигатуры, указанные в файле конфигурации JSON --postprocess [ПОСТПРОЦЕСС] Укажите сценарий для постобработки --configfile [КОНФИГУРАЦИЯ] Укажите путь к файлу конфигурации JSON (см. Пример: src / config.sample.json) --custom [ПОЛЬЗОВАТЕЛЬСКИЙ] Указать собственный шрифт символа. Все новые глифы будут скопированы без масштабирования. -ext [РАСШИРЕНИЕ], --расширение [РАСШИРЕНИЕ] Измените тип файла шрифта для создания (например, ttf, otf) -out [OUTPUTDIR], --outputdir [OUTPUTDIR] Каталог для вывода файла исправленного шрифта в --progressbars Показывать индикаторы выполнения в процентах для каждого набора символов --no-progressbars Не отображать индикаторы выполнения в процентах по набору символов. Символьные шрифты: --fontawesome Добавить Font Awesome Glyphs (http: // fontawesome.io /) --fontawesomeextension Добавить символы расширения Font Awesome (https://andrelzgava.github.io/font-awesome-extension/) --fontlinux, --fontlogos Добавить шрифт Linux и другие глифы с открытым исходным кодом (https://github.com/Lukas-W/font-logos) --octicons Добавить символы Octicons (https://octicons.github.com) --powersymbols Добавить символы питания IEC (https://unicodepowersymbol.com/) --pomicons Добавить символы помикона (https://github.com/gabrielelana/pomicons) --powerline Добавить символы Powerline --powerlineextra Добавить символы Powerline (https: // github.com / ryanoasis / powerline-extra-symbols) --материал, --материалдизайнконы, --mdi Добавить значки материального дизайна (https://github.com/templarian/MaterialDesign) --погода, --погода Добавить значки погоды (https://github.com/erikflowers/weather-icons)

Прекратить использование графических шрифтов Майкл Иригойен

Всего за год до того, как первая веб-страница была запущена в 1991 году, Microsoft начала поставлять, пожалуй, самый известный иконочный шрифт, Wingdings .Однако прошло почти 22 года, прежде чем иконочные шрифты стали тенденцией дизайна в Интернете.

Введение ат-правила @ font-face CSS позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, такие как Wingdings , можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, иконочные шрифты фактически были способом добавления векторных иконок на ваш веб-сайт.

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

Flawed Icon Fonts

Flash of Unstyled Content (FOUC)

При использовании @ font-face вы даете браузеру команду сделать HTTP-запрос на требуемый файл шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, указанные в разметке, он строит объектную модель документа (DOM) в реальном времени.Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и оборудования пользователя.

В ожидании ресурса шрифта браузер выберет отображение текстового содержимого HTML перед фактическим его получением. Это приводит к появлению нестилизованного содержимого (FOUC). Эти вспышки могут сильно раздражать ваших посетителей. Иконочные шрифты обычно назначают свои глифы кодовым точкам за пределами нормального диапазона, в котором работает большинство обычных шрифтов.Однако в противном случае возможно, что вместо значков появятся случайные символы или глифы до того, как шрифт будет полностью загружен.

Примечание : можно использовать более новые директивы, такие как preload , в ресурсах шрифтов, чтобы избежать FOUC. Однако это не решает всех других проблем, описанных в этой статье, и не рекомендуется.

Специальные возможности

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

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

2. Переопределяет таблицу стилей — Люди с нарушениями зрения часто используют настраиваемые таблицы стилей для переопределения стилей по умолчанию для посещаемых ими веб-сайтов, чтобы упростить их использование.Это может включать изменение цветовых схем, увеличение размера или веса шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки неконтекстным образом, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заставит ваши значки заменяться и полностью исчезать, потенциально делая ваш веб-сайт непригодным для использования.

3. Невозможно предоставить метаданные — Процесс реализации шрифта значка в Интернете требует использования псевдоэлементов :: before или :: after .Семантически псевдоэлементы :: before и :: after предназначены для добавления косметического содержимого к существующему элементу. Для шрифтов значков это имеет смысл, если значок используется в контексте с другим элементом. Однако во многих случаях значок используется в качестве основного элемента. Например, «x» для «закрыть» или дом для возвращения «домой». Сами по себе эти значки не предоставляют никакой семантической информации об их содержании; Вы не можете дать им ярлыки или описать их напрямую.

Размер и ремонтопригодность

Иконочные шрифты — недешевый актив. Каждый раз, когда посетитель загружает ваш значок-шрифт, он загружает все значки, которые вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Уже сам по себе этот факт делает работу со шрифтами иконок сложными и довольно раздражающими. Если ваш шрифт значков содержит 200 значков, а вы используете 10 из них, вы заставляете посетителей загружать 190 значков, которые они никогда не увидят. Это ухудшит впечатления вашего посетителя из-за увеличения времени загрузки и увеличения FOUC.

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

Ухудшение визуального качества

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

Трудно стилизовать / расположить

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

SVG спешат на помощь!

С выпуском версии браузера Microsoft Edge на базе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками в отношении масштабирования в Internet Explorer и до Chromium Edge. И угадай что? SVG — это потрясающих веб-иконок!

Иконки Just Work

Данные изображения SVG хранятся непосредственно в вашем HTML-документе.Как только браузер обрабатывает его, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае со шрифтом значка.

Лучшая доступность

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

• Это семантически элементы изображения.
• Предоставить метаданные очень просто. Просто укажите элемент