Font awesome что это
Font awesome что это
Сделайте ваши иконки прекрасными для всех ваших пользователей
Иконочные шрифты и Общедоступность
Современные версии вспомогательных технологий, таких как чтение с экрана, будут читать таблицы стилей сгенерированного контента (как объявить иконки Font Awesome), а также спецсимволы юникода. Если попробовать объявить иконки нашим стандартным методом, то у некоторых вспомогательных технологий могут возникнуть проблемы:
Используйте Font Awesome с расчетом на общедоступность
Font Awesome CDN helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, use our simple syntax, and any icons you use will have all of the best practices and manual techniques below applied automatically.
Когда используете иконки в вашем интерфейсе, то данный мануал подскажет вам как помочь вспомогательным технологиям проигнорировать или лучше понять Font Awesome.
Иконки, используемые для декорирования или визуального стиля
Иконки с семантической или интерактивной целью
Если вы используете иконку для того, чтобы передать смысл (а не только в качестве декоративного элемента), убедитесь, что значение иконки также передается вспомогательным технологиям. Это касается контента, который вы сокращаете с помощью иконок, а также интерактивных элементовуправления (кнопки, элементы форм, переключатели и тд). Есть несколько способов для выполнения этой задачи:
Если иконка не является интерактивным элементом
If an icon represents an interactive element
In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.
Other cases and information
While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.
We’ll continue to work on these under the larger topic of accessibility, but in the meantime, let us know if any bugs or issues.
Font Awesome 5 доступен!
Больше иконок
Начните использовать 893 иконки прямо сейчас с бесплатной версией FA, плюс еще 1,283 иконки с Pro-версией, которая позволит вам в дальнейшем получить еще 46 категорий иконок, когда мы их закончим!
Новые SVG
Наши новые SVG в купе с Javascript дадут вам всю мощь SVG без каких-либо хлопот.
Еще и еще
Лигатуры для удобного использования на десктопах, обертка для удобного перехода с 4 версии, больше стилей, иконок и инструментов с платной версией FA Pro.
Font awesome что это
Font Awesome имеет динамически развивающееся сообщество, где каждый помогает друг другу. Вы можете обратьтся в поддержку, сообщить об ошибках, запросить новые иконки, прислать исправления ошибок, и следить за будущим Font Awesome.
Обращение в поддержку
У вас не получается работать с Font Awesome? Что-то работает не так как хотелось бы вам? Я ненавижу это. К сожалению, у меня больше не хватает времени осуществлять поддержку по электронной почте, поэтому предлагаю вам такую последовательность ваших действий:
Запрос новых иконок
Обычно запросы на новые иконки поступают в сообществе Font Awesome в GitHub. Хотите сделать запрос на новые иконки? Вот некоторые советы как это можно сделать:
Сообщение об ошибках
Нашли ошибку в работе Font Awesome? Можете сообщите о ней в репозитории GitHub. Но будьте добры соблюдать правила:
Исправление ошибок
Будущее проекта
Хотите отслеживать то, что планируется в Font Awesome? Для этого есть полезная ссылка в репозиторий проекта в GitHub.
Благодарности
Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.
ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.
Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.
Отблагодарите меня
Я надеюсь, что вы считаете, Font Awesome реально прекрасен. Я потратил сотни часов, чтобы моим проектом могло пользоваться все интернет-сообщество. Если вы желаете, то есть несколько способов отблагодарить меня.
Советуйте меня в Gittip
Мой список желаний на Amazon
Или выбрать что-то прямо из моего списка желаний. Подарочные карты прекрасны =).
Font awesome что это
Несколько простых примеров, показывающих как пользоваться Font Awesome
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега . Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Базовые иконки
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег так как он очень короткий, но использование тега будет семантически более правильно).
- Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Увеличенные иконки
- Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Иконки с фиксированной шириной
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.
Иконки списков
Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.
Обрамленные и вынесенные иконки
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
Анимированные иконки
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.
Повернутые и отзеркаленные иконки
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
Групповые иконки
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
Примеры для Bootstrap 3
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление. Сохранение. Держитесь крепче!
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
Использование Font Awesome 5 в проекте React
Font Awesome – это набор инструментов для веб-сайтов, который содержит иконки и логотипы социальных сетей. React – это гибкая библиотека для написания кода, которая часто используется для создания пользовательских интерфейсов. Команда Font Awesome создала специальный компонент React для содействия интеграции. В этом руководстве мы поговорим о Font Awesome 5 и его структуре. Также вы узнаете, как использовать компонент React Font Awesome.
Требования
Вам не обязательно писать код, чтобы проходить это руководство, но если вы хотите попробовать выполнить пару примеров, вам понадобится следующее:
1: Использование Font Awesome
Команда Font Awesome создала компонент React, чтобы вы могли без труда использовать их вместе. С помощью этой библиотеки вы можете следовать нашему руководству (но сначала выберите иконку).
В примерах этого руководства мы будем использовать иконку home, а вся работа будет происходить в файле App.js. откройте этот файл:
Итак, после этого в приложении появится маленькая иконка home. Как видите, этот код выбирает только иконку home, следовательно, к размеру пакета нашего приложения добавляется только размер одной иконки.
После монтирования этого компонента инструмент Font Awesome заменит его SVG-версией выбранной иконки.
2: Выбор иконок
Прежде чем мы продолжим работу, важно разобраться, как структурированы библиотеки Font Awesome. Поскольку иконок в библиотеке очень много, команда решила разделить их на несколько пакетов.
Чтобы изучить возможные варианты и выбрать необходимые иконки, рекомендуется посетить специальную страницу на сайте Font Awesome. В левой части этой страницы вы найдете различные фильтры – они очень важны, потому что именно они сообщают, из какого пакета импортировать ту или иную иконку.
В приведенном выше примере мы извлекли иконку из пакета @fortawesome/free-solid-svg-icons.
Как определить, какому пакету принадлежит иконка?
Чтобы определить, к какому пакету относится нужная вам иконка, просмотрите на фильтры слева. Также можно кликнуть на иконку и увидеть пакет, которому он принадлежит.
Когда вы узнаете название необходимого вам пакета, важно запомнить его трехбуквенное сокращение:
Найти определенный тип можно в левой панели на странице иконок.
Как использовать иконки из определенных пакетов?
Если вы внимательно просмотрите страницу иконок на сайте Font Awesome, вы заметите, что одна и та же иконка обычно существует в нескольких версиях. Например, введите в поиск boxing-glove – в результате вы увидите три иконки.
Примечание: Следующие примеры не будут работать, пока мы не создадим библиотеку иконок – мы сделаем это немного позже.
Вот пример для пакета solid:
Этот пакет используется по умолчанию, если не указано другое:
Пакет light используется с помощью сокращения fal:
Свойство icon нужно было изменить со строки на массив.
3: Установка Font Awesome
Поскольку существует несколько версий одной иконки, несколько пакетов, а также бесплатные/профессиональные пакеты в придачу, для их установки требуется несколько пакетов npm. Вероятно, вам придется установить сразу несколько пакетов и только после этого выбрать нужные иконки.
В этом мануале мы продемонстрируем, как установить несколько пакетов.
Выполните следующую команду, чтобы установить базовые пакеты:
Следующая команда установит иконки regular:
Эта команда установит solid:
Используйте эту команду для установки иконок light:
Эта команда установит иконки duotone:
Следующая команда установит значки брендов:
Если вы хотите установить все пакеты за один раз, вы можете использовать эту команду:
Эта команда устанавливает все бесплатные иконки.
Если у вас есть профессиональная учетная запись Font Awesome, вы можете использовать следующую команду:
Она установит все иконки, включая профессиональные.
Итак, вы установили пакеты, но еще не использовали их в своем приложении и не добавляли их в пакет своего приложения. Давайте посмотрим, как это сделать.
4: Создание библиотеки иконок
Импортировать нужную иконку в несколько файлов – не всегда простая задача. Допустим, если вы используете логотип Twitter в нескольких местах, вам едва ли захочется писать его несколько раз.
Чтобы импортировать все необходимое за один раз и не импортировать каждую иконку в отдельный файл, мы создадим библиотеку Font Awesome.
Давайте создадим файл fontawesome.js в папке src, а затем импортируем его в index.js. Вы сможете добавлять этот файл во все дочерние компоненты, в которых вы хотите использовать иконки. Вы даже можете сделать это прямо в своем файле index.js или App.js. Однако лучше собрать все иконки в отдельный файл, поскольку он может увеличиться со временем.
Итак, поместите в src/fontawesome.js следующее:
Теперь этот файл нужно импортировать в index.js. откройте его и внесите строку:
Импорт целого пакета иконок
Импортировать пакеты иконок целиком не рекомендуется, потому что при этом вы импортируете в свое приложение слишком много лишних иконок, из-за чего пакет увеличится в размере. Если вам действительно нужен весь пакет, вы, безусловно, можете импортировать его.
Предположим для примера, что вам нужны все иконки брендов из пакета @fortawesome/free-brands-svg-icons. Чтобы импортировать все иконки, нужно открыть файл fontawesome.js и использовать следующее:
fab импортирует весь пакет с иконками брендов.
Индивидуальный импорт иконок
Рекомендуемый способ использования иконок из Font Awesome – импортировать их поштучно и только нужные, чтобы окончательные размеры вашего пакета были как можно меньше.
В файле fontawesome.js вы можете создать библиотеку из нескольких иконок, хранящихся в разных пакетах, например:
Импорт одной иконки из нескольких пакетов
Если вам нужны все доступные типы иконки boxing-glove (то есть иконки из пакетов fal, far и fas), вы можете импортировать их все под другим именем и затем добавить в свой fontawesome.js.
Затем вы можете использовать их при помощи разных префиксов.
5: Использование иконок
Теперь, когда вы установили все то, что вам нужно, и добавили иконки в библиотеку Font Awesome, мы можем использовать их и определить их размеры. В этом мануале мы будем использовать пакет light (fal).
В первом примере мы установим нормальный размер:
Во втором примере мы попробуем использовать именованный размер, в нем используются сокращения для small (sm), medium (md), large (lg) и extra-large (xl):
Третий вариант – использовать нумерованные размеры (максимальное значение здесь – 6):
Нумерованные размеры позволяют использовать десятичные дроби, чтобы подобрать идеальный размер:
Font Awesome стилизует свои SVG, используя цвет текста CSS. Если мы поместим тег
туда, где будет расположена иконка, цвет иконки будет совпадать с цветом текста:
Font Awesome также предлагает функцию power transforms, с помощью которой вы можете объединять различные преобразования в рамках одной строки:
Вы можете использовать любые преобразования, перечисленные на сайте Font Awesome: перемещать иконки вверх, вниз, влево или вправо, чтобы добиться идеального позиционирования относительно текста или границ кнопок.
Иконки фиксированной ширины
Если все ваши иконки должны быть одинаковой ширины, Font Awesome позволяет использовать свойство fixedWidth. Допустим, вам нужна фиксированная ширина иконок для выпадающего меню в навигации:
Вращающиеся иконки
Вращение иконок применяется на кнопках форм (в частности при обработке форм). Вы можете использовать вращающуюся иконку, чтобы создать общепринятый эффект для загрузки:
Вы можете использовать свойство spin где угодно:
Маскировка иконок (продвинутая функция)
Font Awesome позволяет комбинировать две иконки и создавать таким образом эффекты маскировки. При этом нужно сначала определить обычную иконку, а затем использовать свойство mask, чтобы определить вторую, которая будет расположена поверх первой. Первая иконка при этом будет ограничена размерами маскирующей иконки.
В этом примере мы создали фильтры тегов, используя маскировку:
Обратите внимание: мы можем связать несколько свойств transform и с их помощью переместить внутреннюю иконку так, чтобы она соответствовала маскирующей иконке по размерам.
Мы даже можем раскрасить и изменить фоновый логотип с помощью Font Awesome.
6: react-fontawesome и иконки вне React
Если вы работаете не с одностраничным приложением (SPA), а с традиционным сайтом на React, вы можете избежать импорта главной библиотеки SVG/JS и библиотеки react-fontawesome. Для этого Font Awesome создал возможность использования библиотек React для отслеживания иконок вне компонентов React.
MutationObserver – это веб-технология, которая позволяет нам оперативно отслеживать изменения в DOM. Узнать больше о ней можно в документации React Font Awesome.
Заключение
Font Awesome и React – отличное сочетание, но при этом возникает необходимость в использовании нескольких пакетов иконок и поиске оптимальных комбинаций. В этом мануале мы поговорили об основах использования Font Awesome и React.
Font Awesome
Шрифтовые иконки для
использования с Twitter Bootstrap
Что нового в Font Awesome 3.0
Новые иконки 3.0
- icon-cloud-download icon-cloud-upload icon-lightbulb icon-exchange icon-bell-alt icon-file-alt icon-beer icon-coffee icon-food icon-fighter-jet
- icon-user-md icon-stethoscope icon-suitcase icon-building icon-hospital icon-ambulance icon-medkit icon-h-sign icon-plus-sign-alt icon-spinner
- icon-angle-left icon-angle-right icon-angle-up icon-angle-down icon-double-angle-left icon-double-angle-right icon-double-angle-up icon-double-angle-down icon-circle-blank icon-circle
- icon-desktop icon-laptop icon-tablet icon-mobile-phone icon-quote-left icon-quote-right icon-reply icon-github-alt icon-folder-close-alt icon-folder-open-alt
Web-приложение
- icon-adjust icon-asterisk icon-ban-circle icon-bar-chart icon-barcode icon-beaker icon-beer icon-bell icon-bell-alt icon-bolt icon-book icon-bookmark icon-bookmark-empty icon-briefcase icon-bullhorn icon-calendar icon-camera icon-camera-retro icon-certificate icon-check icon-check-empty icon-circle icon-circle-blank icon-cloud icon-cloud-download icon-cloud-upload icon-coffee icon-cog icon-cogs icon-comment icon-comment-alt icon-comments icon-comments-alt icon-credit-card icon-dashboard icon-desktop icon-download icon-download-alt
- icon-edit icon-envelope icon-envelope-alt icon-exchange icon-exclamation-sign icon-external-link icon-eye-close icon-eye-open icon-facetime-video icon-fighter-jet icon-film icon-filter icon-fire icon-flag icon-folder-close icon-folder-open icon-folder-close-alt icon-folder-open-alt icon-food icon-gift icon-glass icon-globe icon-group icon-hdd icon-headphones icon-heart icon-heart-empty icon-home icon-inbox icon-info-sign icon-key icon-leaf icon-laptop icon-legal icon-lemon icon-lightbulb icon-lock icon-unlock
- icon-magic icon-magnet icon-map-marker icon-minus icon-minus-sign icon-mobile-phone icon-money icon-move icon-music icon-off icon-ok icon-ok-circle icon-ok-sign icon-pencil icon-picture icon-plane icon-plus icon-plus-sign icon-print icon-pushpin icon-qrcode icon-question-sign icon-quote-left icon-quote-right icon-random icon-refresh icon-remove icon-remove-circle icon-remove-sign icon-reorder icon-reply icon-resize-horizontal icon-resize-vertical icon-retweet icon-road icon-rss icon-screenshot icon-search
- icon-share icon-share-alt icon-shopping-cart icon-signal icon-signin icon-signout icon-sitemap icon-sort icon-sort-down icon-sort-up icon-spinner icon-star icon-star-empty icon-star-half icon-tablet icon-tag icon-tags icon-tasks icon-thumbs-down icon-thumbs-up icon-time icon-tint icon-trash icon-trophy icon-truck icon-umbrella icon-upload icon-upload-alt icon-user icon-user-md icon-volume-off icon-volume-down icon-volume-up icon-warning-sign icon-wrench icon-zoom-in icon-zoom-out
Редактор текста
- icon-file icon-file-alt icon-cut icon-copy icon-paste icon-save icon-undo icon-repeat
- icon-text-height icon-text-width icon-align-left icon-align-center icon-align-right icon-align-justify icon-indent-left icon-indent-right
- icon-font icon-bold icon-italic icon-strikethrough icon-underline icon-link icon-paper-clip icon-columns
- icon-table icon-th-large icon-th icon-th-list icon-list icon-list-ol icon-list-ul icon-list-alt
Указатели
- icon-angle-left icon-angle-right icon-angle-up icon-angle-down icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow-up
- icon-caret-down icon-caret-left icon-caret-right icon-caret-up icon-chevron-down icon-chevron-left icon-chevron-right icon-chevron-up
- icon-circle-arrow-down icon-circle-arrow-left icon-circle-arrow-right icon-circle-arrow-up icon-double-angle-left icon-double-angle-right icon-double-angle-up icon-double-angle-down
- icon-hand-down icon-hand-left icon-hand-right icon-hand-up icon-circle icon-circle-blank
Видео плеер
Социальные
Интеграция
Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.
Bootstrap + Font Awesome
Используйте Font Awesome с Bootstrap CSS.
Папка со шрифтами находится относительно (выше) директории с CSS-файлами.
Кастомная интеграция Bootstrap + Font Awesome с использованием LESS
Используйте этот метод для интеграции Font Awesome в Twitter Bootstrap используя LESS.
Папка со шрифтами находится относительно (выше) директории с скомпилированными CSS-файлами.
Кастомная интеграция Bootstrap + Font Awesome Integration используя SASS или SCSS
Никогда не пробовал использовать это в живом проекте, так что дайте знать, если найдете ошибки в SCSS или SASS файлах.
Не используете Bootstrap?
Требуется поддержка IE7?
Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.
Примеры
Много-много примеров в стиле Twitter Bootstrap.
Используйте наши иконки в:
- Списки (как этот) Кнопки Группы кнопок Навигация Пред- и пост- идущие элементы в input И много другого в вашем CSS
Новые стили в 3.0
Примеры в HTML
Строчные иконки
Поместите тег иконки Font Awesome рядом с любым элементом или в тексте.
Большие иконки
Анимирование
Границы & Впуклые иконки
Кнопки
Группы кнопок
Выпадающие списки и кнопки
Списки
- Списки Кнопки Группы кнопок Навигация Пост- и пред- идущие элементы
Замените знак списка своим собственным.
Навигация
Используйте иконки в навигации для визуализации пунктов меню.
Пост- и пред- идущие элементы
Кастомный CSS
Все что возможно сделать при помощи CSS, можно применить к Font Awesome.
Звёздный рейтинг (Вдохновение от CSS Tricks)
Сотрудничество и помощь Font Awesome
Как добавить новые иконки?
Roadmap
Ниже план на будущее.
- Облегчение самостоятельной сборки шрифта. Больше иконок. Есть идеи? Добавьте запрос на иконку в проект Font Awesome на GitHub. Пособие по CSS методам, в духе «Звездного рейтинга» (см. выше).
Лицензия
Kyruus
Kyruus это хорошо финансируемый, стартап направленный на улучшение здравоохранения в Бостоне (Boston). Мы верим в то что правильная информация доставленная в правильное время (быстро) поможет врачам делать правильные решения. Мы верим что можем сохранить людям жизнь.
Что мы любим в Kyruus:
- Дизайн. В любой сфере работы компании дизайн стоит на первом месте. Он безупречен. Цель. Каждый день, каждый день я (Dave) просыпаюсь что бы сделать этот мир лучше. Люди. Я работаю с лучшими людьми. Которые больше чем умные люди. Хорошие люди.
В Kyruus требуются хорошие люди. Дизайнеры, разработчики приложений, мастера по работе с большими данными, & интерны. Присоединяйтесь и работайте со мной.
Благодарности
Чем помочь?
Распространяйте иконки для того что бы Font Awesome стал более популярным.
Помогите Дейву купить iMac
Пожертвования В качестве благодарности Дейву за предоставленный шрифт, Дейв мечтает о новом алюминиевом и серебристом iMac для того что бы он мог продолжать творить.
Лист желаний Дейва на Amazon
Выберите что-то конкретное из листа желаний Дейва в качестве благодарности.
Контакты
- Email: Dave Gandy Twitter: @FortAweso_me Должность: Ведущий Дизайнер продуктов в Kyruus Переведено: Dmitriy A. в стенах Veliov Group Original in English here.
Особая благодарность
Особая благодарность @robmadole и @supercodepoet за оценку дизайна, советы, и помощь с backbone.js.
Особая благодарность @grantgordon и @johnsmclay за разработку icnfnt, лучший способ собрать свой собственный Font Awesome.