Начало работы с Font Awesome
Font Awesome CDN Супер легко
CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.
Для чего нужен ваш email?
или
Расширенная кастомизация Легко
Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.
Скачать
Использование Sass или Less
Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.
- Скопируйте полностью папку
font-awesomeв папку вашего проекта. - В вашем проекте откройте файлы
font-awesome/less/variables.или
font-awesome/scss/_variables.scssи отредактируйте@fa-font-pathили$fa-font-pathсоответственно, для того, чтобы указать путь к папке со шрифтами.@fa-font-path: "../font";
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
- Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
- Посмотрите примеры для начала работы с Font Awesome!
или
Продвинутый уровень Профи
Sass Ruby Gem
Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.
- Добавьте нижеуказанную строку в Gemfile вашего проекта:
gem 'font-awesome-sass'
- Далее запустите:
$ bundle
- Или установите вручную:
$ gem install font-awesome-sass
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.:
scss
@import "font-awesome-sprockets"; @import "font-awesome";
Дополнительная информация
Валидаторы
Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.
На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.
Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0
Internet Explorer 8 и @font-face
IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before.
Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует.
Подробности данной проблемы.
Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0
Необходима поддержка IE7 ?
Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .
Решение ошибок
Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на
wiki -странице по частым ошибкам.
Font Awesome 5 доступен!
Font Awesome 5
или
Спасибо, просто скачать
Font Awesome 4
Иконочные шрифты, альтернативы FontAwesome
Веб-разработкаЧто такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта. С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:
- Возможность масштабирования без потери качества
- Беспроблемная поддержка в большинстве браузеров
- Возможность стилизации, работа как с обычным текстом
- Небольшой вес
- Всего за один запрос на сервер загружаются все необходимые иконки
Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.
Самый популярный иконочный шрифт FontAwesome https://fontawesome.com/, но поскольку информации о нем и так полно, мы лучше рассмотрим альтернативные шрифты.
Этот шрифт в качестве иконок содержит логотипы различных интернет и ИТ брендов.
Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.
Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.
Лицензия: SIL Open Font and MIT
Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.
Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.
Лицензия: MIT and CC-BY for the Emoticon graphics
Octicons — это иконочный шрифт от GitHub. Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.
Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.
Лицензия: Attribution-ShareAlike 4.0 International
DevIcons — это иконочный шрифт разработанный Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.
Лицензия: MIT
В этом шрифте содержится множество иконок, вдохновленных дизайном Google Material и сгруппированных в 15 различных категорий. Чтобы использовать их, нужно просто подключить файл шрифта Material-Design-Iconic-Font.
Лицензия: Attribution-ShareAlike 4.0 International
Как добавить иконки | Font Awesome Docs
Вы можете размещать значки Font Awesome практически в любом месте, и мы постарались сделать так, чтобы значки приобретали характеристики и естественным образом сливались с окружающим текстом.
Мы рассмотрим основы того, как добавлять значки в ваш проект, сокращенные имена классов для различных стилей значков, как добавлять значки в HTML, использовать псевдонимы значков и многое другое!
Перед началом работы
Убедитесь, что у вас есть:
- Настройте Font Awesome в своем проекте и узнайте, где вы припарковали свою Тардис.
Основы
Чтобы добавить значок, вам необходимо знать несколько битов информации:
- Сокращенное имя класса для стиля , который вы хотите использовать
- Имя значка с префиксом fa-90 (означает «Font Awesome» естественно!)
- Сокращенное имя класса для семейства , которое вы хотите использовать Дополнительно
Семейства + стили
Существует три семейства иконок Font Awesome, каждое из которых имеет уникальный внешний вид, имя класса и семейство шрифтов @font-face .
И в Font Awesome Classic, и в Sharp есть пять стилей значков Font Awesome. Here are some examples:
Classic Family
| Style | Availability | Style class | font-weight | Looks like |
|---|---|---|---|---|
| Solid | Free Plan | fa-solid | 900 | |
| Regular | Pro only | fa-regular | 400 | |
| Light | Pro only | fa-light | 300 | |
| Thin | PRO только | FA-Thin | 100 | |
| Pro only | fa-duotone | 900 |
Sharp Family
| Style | Availability | Style class | font-weight | Looks like |
|---|---|---|---|---|
| Solid | Только Pro | fa-sharp fa-solid | 900 | |
| Regular | 2 Скоро! | |||
| Свет | Скоро! | |||
| Тонкий | Скоро! | |||
| Duotone | Скоро! |
0061 Бренды FA-Брендс Add Icons к HTML
We Conlect Pont Font Awesom согласованный элемент в вашем проекте. Мы рекомендуем использовать элемент с классами Font Awesome CSS для стиля , класс для стиля значка, который вы хотите использовать, и 9Класс имени значка 0022 с префиксом fa- для значка, который вы хотите использовать. Люди, ориентированные на специальные возможности, могут выбрать элемент вместо .
Вот пример:
Установка различных семейств + стилей
А вот пример, который ссылается на разные стили и семейства значков:
Псевдонимы
Мы обновили многие из наших имен значков в Версии 6, чтобы сделать их более универсальными и последовательно. Но мы хотели убедиться, что ваш существующий код не сломается, поэтому мы создали псевдонимы для переименованных значков, чтобы они могли работать как со старыми, так и с новыми именами.
Вы также можете использовать старое или новое имя для стилей. Таким образом, вы все равно можете использовать fas , far , fal , fad и fab . И мы также включили старые префиксные версии для нашего нового стиля Thin ( fat ) и нового семейства стилей Sharp (Sharp solid — fass ).
Альтернативные способы добавления значков
У нас также есть много других способов добавления значков Font Awesome, если в вашей ситуации требуется что-то особенное:
При использовании веб-шрифтов
- Добавьте значки, используя только CSS с псевдоэлементами.
При использовании SVGS
- Использование SVG без JS с использованием наших SVG Sprites
- Принесите стиль с нашими голыми SVGS
- Использование символов SVG для повышения производительности с повторяющимися Icons
- . Что такое иконочный шрифт? — Создание шрифтов значков для веб-видеоруководства
Из курса: Создание иконочных шрифтов для Интернета
Что такое иконочный шрифт?
“
Я понимаю, что некоторые из вас, просматривающих этот курс, возможно, никогда раньше не использовали иконочный шрифт.
Если вы новичок в них, вы можете спросить себя, что же такое иконочный шрифт и что в них такого особенного? Для вас, ребята, я хочу воспользоваться моментом и дать вам краткий обзор того, что такое иконочные шрифты. И если вы уже использовали их какое-то время или знакомы с ними, вы можете смело идти вперед и пропустить этот фильм, если хотите. Таким образом, иконочные шрифты — это просто еще один способ отображения значков в ваших приложениях и на веб-сайтах. В прошлом эта задача в основном возлагалась на форматы изображений, такие как GIF и PNG, и тогда изображение просто отображалось на странице. С годами у нас появились некоторые методы, такие как спрайты CSS, которые сделали этот процесс немного более эффективным. Но использование изображений для иконок обычно приводит к дополнительным запросам к серверу. И качество изображения, вероятно, пострадает, если значок масштабируется, потому что они зависят от разрешения, что делает их очень плохими для адаптивного дизайна. Чтобы решить эту проблему, дизайнеры обратились к более старому решению — шрифтам.Пока мы создаем шрифты, мы храним в них символы. Например, вы, вероятно, хорошо знакомы со шрифтом, который я сейчас пролистываю. Это Виндингс. Это было вокруг в течение долгого времени. И вы, вероятно, сами использовали пару этих символов, по крайней мере, один или два раза. Что ж, с расширением поддержки веб-шрифтов в браузерах было фактически неизбежно, что кому-то в конце концов придет в голову идея начать использовать значки и символы через шрифты в Интернете. Таким образом, иконочный шрифт ничем не отличается от обычного шрифта. И я собираюсь переключиться на иконочный шрифт, который вы, ребята, будете создавать в этом курсе, чтобы вы могли как бы увидеть, что мы собираемся делать. Как я уже говорил, иконочный шрифт ничем не отличается от обычного шрифта. Единственная разница в том, что вместо буквы, сопоставленной с символом или областью Unicode, у вас будет символ, подобный этому. Теперь каждый шрифт значка немного отличается, и стратегия, используемая для сопоставления значков с конкретными символами, будет определять, как этот шрифт используется. Если, например, значок сопоставлен с определенным символом, например, h здесь для дома, все, что вам нужно сделать, чтобы отобразить его, — это ввести соответствующую букву. Затем убедитесь, что в вашем CSS этот шрифт значка используется для его семейства шрифтов. На самом деле чаще можно найти значки, сопоставленные с определенными символами Unicode, которые избегают использования основных латинских символов. Теперь это могут быть обычные символы символов или часть того, что известно как область частного использования Unicode. Вы можете увидеть пример этого здесь. У нас есть абзац с классом icon-heart. А затем в CSS мы используем псевдо-селектор before, чтобы сказать: «Эй, продолжайте и отобразите эту конкретную кодировку символов, 2661, которая в данном случае является символом сердца, поэтому она будет показывать сердце». Теперь, когда вы сопоставляете эти символы, это могут быть обычные символы символов, как вы видите здесь с этим сердцем, или они также могут быть частью так называемой области частного использования Unicode.
Если вы новичок в них, вы можете спросить себя, что же такое иконочный шрифт и что в них такого особенного? Для вас, ребята, я хочу воспользоваться моментом и дать вам краткий обзор того, что такое иконочные шрифты. И если вы уже использовали их какое-то время или знакомы с ними, вы можете смело идти вперед и пропустить этот фильм, если хотите. Таким образом, иконочные шрифты — это просто еще один способ отображения значков в ваших приложениях и на веб-сайтах. В прошлом эта задача в основном возлагалась на форматы изображений, такие как GIF и PNG, и тогда изображение просто отображалось на странице. С годами у нас появились некоторые методы, такие как спрайты CSS, которые сделали этот процесс немного более эффективным. Но использование изображений для иконок обычно приводит к дополнительным запросам к серверу. И качество изображения, вероятно, пострадает, если значок масштабируется, потому что они зависят от разрешения, что делает их очень плохими для адаптивного дизайна. Чтобы решить эту проблему, дизайнеры обратились к более старому решению — шрифтам.
Если, например, значок сопоставлен с определенным символом, например, h здесь для дома, все, что вам нужно сделать, чтобы отобразить его, — это ввести соответствующую букву. Затем убедитесь, что в вашем CSS этот шрифт значка используется для его семейства шрифтов. На самом деле чаще можно найти значки, сопоставленные с определенными символами Unicode, которые избегают использования основных латинских символов. Теперь это могут быть обычные символы символов или часть того, что известно как область частного использования Unicode. Вы можете увидеть пример этого здесь. У нас есть абзац с классом icon-heart. А затем в CSS мы используем псевдо-селектор before, чтобы сказать: «Эй, продолжайте и отобразите эту конкретную кодировку символов, 2661, которая в данном случае является символом сердца, поэтому она будет показывать сердце». Теперь, когда вы сопоставляете эти символы, это могут быть обычные символы символов, как вы видите здесь с этим сердцем, или они также могут быть частью так называемой области частного использования Unicode.
