Начало работы с 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
Как использовать Font Awesome на вашем сайте WordPress
Когда предоставляется выбор между использованием значка вектора или статического изображения, рекомендуется использовать вектор. Они небольшие и быстро загружаются и могут масштабироваться до любого размера без потери разрешения. Font Awesome – это превосходная библиотека векторных иконок, которые вы можете использовать на своих сайтах, и они, вероятно, имеют практически любую форму или марку, которая вам понадобится. И лучше всего? Это бесплатно. Во-вторых, это просто.
Font Awesome WordPress Иконки
Использование библиотеки Font Awesome на вашем сайте WordPress относительно безболезненно. Выполнив эти простые шаги, вы сможете сократить время загрузки страницы и создать действительно чистые и четкие рисунки, используя эти значки в качестве части своей работы.
Следует помнить, что (в большинстве случаев) иконки Font Awesome будут доставляться на ваш сайт как настоящие шрифты. Отсюда и название Font Awesome. Вы сможете стиль и манипулировать ими во всех отношениях.
Из-за этого вам не придется беспокоиться о размере или интервале для каждого отдельного браузера или области просмотра. Если это звучит здорово, это потому, что это так. А вот как вы это можно сделать:
Установка Font Awesome
Хотя есть ручной способ установки и использования Font Awesome, есть лучший способ для пользователей WordPress. Прекрасные ребята из FA выпустили официальный плагин Font Awesome для WordPress, и он прекрасно работает.
С установленным и активированным плагином у вас теперь есть доступ к шорткоду [[icon name]], а также к фрагментам HTML. До тех пор, пока вы держите в руках удобный список значков FA, вы точно знаете, какой значок вам нужен. Вы увидите на странице настроек плагина (находится в разделе « Настройки» – «Font Awesome» ), как все настроено по умолчанию.
В общем, это хорошо для хранения и использования. Большинству людей больше ничего не нужно.
Параметр Метод, вероятно, является наиболее важным для большинства людей. Вы можете переключаться между Webfont или SVG. В то время как SVG предоставляет вам больше возможностей и функций (таких как силовые преобразования и маскирование), Font Awesome CDN будет предоставлять значки в виде файлов SVG, а не в виде шрифта. Хотя это лучше в некоторых отношениях, SVG не распознается многими браузерами, и WordPress не всегда хорошо работает с изображениями SVG. Поэтому мы рекомендуем играть безопасно с версией веб-шрифта.
То же самое относится и к Font Awesome: если вы не уверены в разнице или не знаете, зачем вам нужно использовать SVG, тогда придерживаться метода webfont по умолчанию, вероятно, проще всего.
Использовать иконки Font Awesome на вашем сайте WordPress очень просто. Просто добавьте <i class = “fab fa-wordpress”> </ i> в любое место, где вы хотите, чтобы значок появлялся.
Обязательно проверьте библиотеку значков, чтобы узнать, какое имя вставить.
Примечание: шорткоды в плагине являются хитами. Некоторые значки отображаются отлично, в то время как другие отображаются пустыми. Мы рекомендуем придерживаться HTML-вставки, если вы не видите, что шорткод работает для вас. См. Ниже пример WordPress, приведенный выше: не рендеринг, а значок камеры.
Плагин Font Awesome WordPress отлично подходит для людей, которым неудобно заходить в свою тему или файлы для вставки необходимого кода. Однако, если вам это удобно, вы можете следовать этим инструкциям, чтобы получить значки Font Awesome на своем сайте.
Установка Font Awesome Icons вручную
Самое первое, что вам нужно сделать, это зайти на сайт Font Awesome. Здесь, нажмите на кнопку « Начать использовать бесплатно». Они предлагают платные планы для людей, которые имеют сайты с большим трафиком и нуждаются в корпоративном решении, но широкая публика может получить бесплатную версию.
Вы получаете 1500 иконок бесплатно и более 5000 вариантов в плане Pro.
Следующий шаг – просто скопировать / вставить. Но вы должны убедиться, что вы выделили опцию webfont, как мы обсуждали ранее.
В большинстве тем есть место для автоматической вставки кода в
сайта. Например, в случае с Divi вы должны войти в Параметры темы – Интеграция и вставить этот код в поле с надписью Добавить код в заголовок вашего блога .
01 |
|
Когда вы нажмете «Сохранить», вы можете начать добавлять любые значки, которые вы хотите, как мы делали выше.
Только у вас нет доступа к шорткоду при этом.
Если ваша тема не поддерживает интеграцию кода
Если вы не можете найти такое место в своей теме, это также легко сделать вручную. Однако для этого вам придется копаться в файлах Core вашей темы, но это очень быстрое копирование / вставка, и (как правило) это довольно безопасно. Перейдите в Внешний вид – Редактор на панели инструментов WP и найдите файл header.php.
Найдите строку, в которой написано </head>, и перед ней вам нужно вставить тот же код из Font Awesome. Нажмите Обновить файл, и вы сможете сразу начать использовать значки FA.
Дополнительные параметры для установки
И если у вас есть другие, более конкретные потребности в Font Awesome, они предлагают множество способов получить доступ к библиотеке. От установок NPM и Yarn до интеграции Sketch и React у них есть масса опций, если они вам нужны не только для WordPress.
Styling Font Awesome Icons
Теперь, когда они у вас установлены, пришло время сделать иконки всплывающими. Вы можете сделать это с помощью CSS, потому что каждая из иконок управляется классом CSS. Два наиболее часто используемых стиля – это цвет и размер . Вы можете включить CSS-стили в свои таблицы стилей или сделать их встроенными. В общем, вы можете захотеть использовать встроенные стили, потому что подобные иконки не являются универсальными для всего сайта.
На сайте Font Awesome есть примеры того, как это сделать. Они показывают размеры, используя свою иконку igloo и дополнительный класс, такой как fa-xs или fa-xl или fa-2x для определенного размера.
Кроме того, если вам нужно, чтобы значок был относительно определенного размера и абсолютные значения не работали, вы можете поместить его в собственный
, чтобы он работал в рамках ваших ограничений.01 02 03 |
|
5rem;"Завершение
И это все! Круто, верно? Независимо от того, используете ли вы плагин Font Awesome WordPress или вставляете код вручную, для запуска сайта достаточно нескольких шагов. Font Awesome популярен по определенной причине, и отчасти это объясняется простотой использования.
Какой ваш любимый способ использовать иконки Font Awesome?
Статья с изображением любезно предоставлена Font Awesome
Как добавить иконки | Font Awesome Docs
Вы можете размещать значки Font Awesome практически в любом месте, и мы постарались сделать так, чтобы значки приобретали характеристики и естественным образом сливались с окружающим текстом.
Мы рассмотрим основы того, как добавлять значки в ваш проект, сокращенные имена классов для различных стилей значков, как добавлять значки в HTML, использовать псевдонимы значков и многое другое!
Перед началом работы
Убедитесь, что у вас есть:
- Настройте Font Awesome в своем проекте и узнайте, где вы припарковали свою Тардис.
Основы
Чтобы добавить значок, вам необходимо знать несколько битов информации:
- Сокращенное имя класса для стиля , который вы хотите использовать
- Имя значка с префиксом с
Фа-(означает «Font Awesome» естественно!) - Сокращенное имя класса для семейства , которое вы хотите использовать Дополнительно
Семейства + стили
Существует три семейства иконок Font Awesome, каждое из которых имеет уникальный внешний вид, имя класса и семейство шрифтов @font-face . И в Font Awesome Classic, и в Sharp есть пять стилей значков Font Awesome. Вот несколько примеров:
Classic Family
| Style | Availability | Style class | font-weight | Похоже на |
|---|---|---|---|---|
| Сплошной | Свободный план | fa-solid | 900 | |
| Regular | Только Pro | fa-regular 900 29 | 400 | |
| Light | Только Pro | fa-light | 300 | |
| Тонкий | Только Pro | Тонкий | 100 90 062 | |
| Дуотон | Только Pro | fa-duotone | 900 |
Sharp Family
| Стиль | Доступность | Класс стиля | вес шрифта | Похоже на |
|---|---|---|---|---|
| Solid | Только Pro | fa-sharp fa-solid | 900 | |
| Regular 9 0062 | Только Pro | fa-sharp fa-regular | 400 | |
| Light | Только Pro | 900 28 fa-sharp fa-light | 300 | |
| Тонкий | Скоро в продаже ! | |||
| Duotone | Скоро! |
Семейство брендов
| Стиль | Наличие | Класс стиля | вес шрифта | Внешний вид |
|---|---|---|---|---|
| Бренды | Free Plan | fa-brands 90 029 | 400 |
Комплект пользовательских значков (из загруженного комплекта )
| Стиль | Наличие | Класс стиля | толщина шрифта | |
|---|---|---|---|---|
| Набор пользовательских значков s | Только Pro | fa-kit | 400 |
Добавить значки в HTML
Мы разработали Font Awesome для использования с встроенными элементами , и мы рекомендуем вам придерживаться последовательного элемента в вашем проекте.
Мы рекомендуем использовать элемент с классами CSS Font Awesome для стиля , класс для стиля значка, который вы хотите использовать, и класс имени значка с классом fa-.префикс для значка, который вы хотите использовать. Люди, ориентированные на специальные возможности, могут выбрать элемент вместо .
Вот пример:
Установка различных семейств + стилей
А вот пример, который ссылается на разные стили и семейства значков:
Псевдонимы
Мы обновили многие из наших имен значков в Версии 6, чтобы сделать их более универсальными и последовательно. Но мы хотели убедиться, что ваш существующий код не сломается, поэтому мы создали псевдонимы для переименованных значков, чтобы они могли работать как со старыми, так и с новыми именами.
Вы также можете использовать старое или новое имя для стилей. Таким образом, вы все равно можете использовать fas , far , fal , fad и fab .
И мы также включили старые версии префикса для нашего нового стиля Thin ( fat ) и нового семейства стилей Sharp (Sharp Solid — это fass , а Sharp Regular — fasr ).
Альтернативные способы добавления значков
У нас также есть много других способов добавления значков Font Awesome, если в вашей ситуации требуется что-то особенное:
При использовании веб-шрифтов
- Добавьте значки, используя только CSS с псевдоэлементами.
При использовании SVG
- Использование SVG без JS с использованием наших спрайтов SVG
- Принесите свой собственный стиль с нашими голыми SVG
- Используйте символы SVG для повышения производительности с повторяющимися значками 9001 3 Используйте значение Unicode значка
- Используйте имя иконки
Псевдоэлементы CSS | Font Awesome Docs
Если изменение HTML в вашем проекте невозможно, вы можете использовать функцию CSS для добавления значков на страницу при использовании веб-шрифтов Font Awesome.
Работа с псевдоэлементами не для слабонервных.
Ссылка на значки с использованием псевдоэлементов более сложна и подвержена ошибкам, чем стандартный способ добавления элемента в ваш HTML.
Убедитесь, что вы хорошо разбираетесь в CSS и хотите узнать о некоторых основах, на которых работает Font Awesome.
О псевдоэлементах
CSS имеет мощную функцию, известную как псевдоэлементы (opens new window), которая позволяет вам визуально добавлять содержимое на страницу только с помощью CSS. Font Awesome использовал ::before псевдоэлемент для добавления значков на страницу, так как Font Awesome был совсем молодым.
Мы уже узнали, что Font Awesome использует такие классы, как fa и fa-user , для отображения иконок на вашем сайте. Давайте продублируем функционал этих классов и напишем свой, используя псевдоэлементы CSS.
Добавление значка с помощью псевдоэлементов CSS
1.
Определение общего CSS для всех значковВо-первых, вам нужно добавить некоторые общие свойства CSS, применимые ко всем значкам. Лучше сначала избавиться от этого, чтобы упростить свой индивидуальный значок CSS. Вы можете сделать это отдельным правилом или включить стиль в каждое отдельное правило значка (на следующем шаге).
2. Ссылка на отдельные значки
При обращении к любому отдельному значку необходимо указать несколько важных элементов: предыдущий общий шаг настройки.
font правильное пользовательское свойство CSS (см. таблицу семейств ниже). Но учтите, что дуотоны нуждаются в особом обращении.Вот удобная таблица начертаний и весов шрифтов, которые вы можете использовать:
Font Awesome 6 Free или Font Awesome 6 Pro для пользователей Pro 400 900 62 --fa-font-brands Font Awesome 6 Free или Font Awesome 6 Pro для пользователей Pro 900 9002 9 --fa-font-solid Font Awesome 6 Pro 400 --fa-font-regular Font Awesome 6 Pro 300 --fa-font-light Font Awesome 6 Pro 100 --fa-font-thin Font Awesome 6 Sharp 900 --fa-font -sharp-solid Font Awesome 6 Sharp 400 --fa-font-sharp-regular Font Awesome 6 Sharp 300 --fa-font-sharp-light Набор Font Awesome Duotone — это особый случай, который мы рассмотрели ниже в псевдоэлементах CSS и Duotone.
См. Псевдоэлементы CSS в действии!
Нужен более практический пример того, как это сделать? Вот демонстрация Codepen (открывается в новом окне), показывающая, как отображать значки всех стилей с помощью псевдоэлементов CSS с помощью нашей платформы на основе веб-шрифтов.
Псевдоэлементы CSS и Duotone
Использование псевдоэлементов CSS для отображения двухцветных значков следует аналогичной настройке, но требует использования обоих :: до и :: после псевдоэлементов вместе с дополнительными настройками стилей.
1. Определите общий CSS для значков Duotone
Существуют общие свойства CSS, уникальные для стиля Duotone, которые потребуются для всех значков Duotone. Опять же, лучше сначала убрать это в CSS, чтобы упростить определения значков.
- Добавьте стиль к элементам, которые будут содержать псевдоэлемент для поддержки позиционирования.
- Установите для шрифта
- Установите уровни непрозрачности и цвета по умолчанию для каждого слоя двухцветного значка.
2. Ссылки на отдельные слои значков
Ссылки на отдельные двухцветные значки работают так же, как и все значки псевдоэлементов CSS. Установите для содержимого значение Unicode одной из наших иконок. Для иконок Duotone у вас будет два значения — по одному для каждого слоя Duotone. Для door-open у вас будет \f52b для основного уровня и \f52b\f52b для вторичного уровня.
Псевдоэлементы и Sass (SCSS)
Используя наши утилиты миксинов @include fa-icon- , вы можете легко добавлять значки с помощью пользовательских псевдоэлементов CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка.
Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант.
Если вы используете наши примеси для рендеринга значка в нашем семействе стилей Sharp, вам потребуется ссылка на @include fa-family-sharp миксин вместе с миксином @include fa-icon- .
Псевдоэлементы и Less
С помощью наших утилит .fa-icon- mixin вы можете легко добавлять значки с пользовательскими псевдоэлементами CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка.
Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант.
Если вы используете наши миксины для рендеринга значка в нашем семействе стилей Sharp, вам потребуется ссылка на миксин .fa-family-sharp вместе с миксином .fa-icon-.
Псевдоэлементы CSS с нашей платформой SVG+JS
Если вы используете нашу инфраструктуру SVG + JS для рендеринга значков, вам нужно сделать несколько дополнительных действий:
Включить псевдоэлементы
Использование псевдоэлементов CSS для рендеринга значков отключено по умолчанию при использовании нашего SVG + JS Framework.