Начало работы на рабочем столе
Значки Font Awesome можно использовать на рабочем столе. Добавляйте значки в свои дизайнерские макеты, презентации и другие материалы. Мы постарались упростить задачу с помощью наших новых файлов шрифтов на основе лигатур. А для тех случаев, когда вам нужно больше, мы включили полированные векторные SVG-версии каждой иконки отдельно.
Перед началом работы
Убедитесь, что вы уже:
- Загрузили копию наших файлов для настольных компьютеров. и иметь их под рукой.
- Извлечено Обновление на рабочем столе, если вы выполняете обновление с предыдущей версии.
Исправлены некоторые проблемы с использованием файлов шрифтов OTF и TTF в мобильных проектах. После обновления файлов шрифтов еще раз проверьте, правильно ли отображаются значки.
Что в загрузке?
Наша загрузка для рабочего стола содержит следующие каталоги и файлы:
Папки и файлы | Что это такое |
---|---|
/OTFS | Файлы шрифтов на основе лигатуры для каждого стиля в шрифте Awesom |
/SVGS | Индивидуальный оптимизированный . SVG-файлы для каждого ICON in ICON в Font afst (DeSected Awaste (DeSected Awaste (DeSected Awaste (DeSected Awame Awaste (DeSected Awaste (DeSite Awame Awame Icon ate Awame. |
/metadata | Все наши метаданные значков на случай, если вы используете что-то для обхода/организации вещей самостоятельно |
Установка файлов шрифтов на основе лигатур
Начните использовать лигатуры для вставки значков в документы, предварительно установив все стили, которые вы хотели бы использовать. Вот запуск того, что соответствует файлу шрифта, которому Font Awesome Style:
Файлы шрифта | Стиль значка | Доступность |
---|---|---|
/OTFS /FONT Awesome 5 Free-SOLI-SOLI- . | Solid | Бесплатные планы |
/otfs/Font Awesome 5 Free-Regular-400.otf | Обычный | БЕСПЛАТНЫЕ ПЛАНИЯ |
/OTFS /FONT Awesom . otf | Сплошной | Pro только |
/OTFS /FONT Awesom -300.отф | Light | Только Pro |
Вам необходимо установить их в Диспетчер шрифтов, который использует ваша операционная система и управляет своими шрифтами. Для Mac это часто Font Book или Font Explorer X. Кроме того, в зависимости от вашей операционной системы и программного обеспечения для управления, убедитесь, что вы активировали/включили эти шрифты в диспетчере шрифтов после их установки . Они будут доступны для использования в ваших приложениях только в том случае, если они были активированы.
Использование SVG
Вы можете добавить наши файлы SVG в большинство приложений для настольного дизайна, поддерживающих работу с векторной графикой, таких как Figma, Sketch и Adobe Illustrator. Просто не забудьте сделать копию для работы, чтобы не редактировать исходный файл! Вы найдете их организованными по стилю в каталоге SVG загрузки Font Awesome.
Следующие шаги
Узнайте, как ссылаться на значки в документах. Если вы не хотите использовать лигатуры, не стесняйтесь использовать отдельные значки, найденные в /svgs
или придерживайтесь нашего старого и все еще поддерживаемого метода на основе глифов.
Host Font Awesome Yourself | Font Awesome Docs
Предпочитаете получить копию и использовать Font Awesome вместе с исходным кодом вашего собственного проекта при локальной сборке и использовании в рабочей среде? Самостоятельная загрузка и размещение Font Awesome отлично подходит, если у вас много сайтов или приложений в одной кодовой базе или вы хотите настроить части Font Awesome для своего рабочего процесса.
Перед началом работы
Убедитесь, что вы:
- Загрузите веб-файлы Font Awesome v5 и держите их под рукой.
Что в загрузке?
The web-focused Font Awesome Package contains the following directories and files:
Files & Folders | What They Are | Where You Should Start |
---|---|---|
/css | Stylesheets for Web Шрифты | all. css |
/js | SVG with JavaScript | all.js |
/less | Less pre-processor | fontawesome.less |
/scss | Препроцессор SASS | Fontawesome.scss |
/Сприты | SVG Sprites | SOLID.SVG | SOLID.SVG | .SVG | .SVG | .0034 | Individual SVG for each icon | individual *.svg icons |
/webfonts | Web Font files used with CSS | See /css |
Использование веб-шрифтов с CSS
Файл /css/all. css
содержит основные стили плюс все стили значков, которые вам понадобятся при использовании Font Awesome. Папка /webfonts
содержит все файлы шрифтов, на которые ссылается приведенный выше CSS и от которых зависит.
Скопируйте всю папку /webfonts
и /css/all.css
в каталог статических ресурсов вашего проекта (или куда вы предпочитаете хранить интерфейсные ресурсы или материалы поставщиков).
Добавьте ссылку на скопированный файл /css/all.css
в
каждого шаблона или страницы, на которой вы хотите использовать Font Awesome.
Использование SVG с JavaScript
/js/all.js
загружает все базовые функции, а также все стили значков, которые вам понадобятся при использовании Font Awesome. Скопируйте его в каталог статических ресурсов вашего проекта (или в другое место, где вы предпочитаете хранить интерфейсные ресурсы или материалы поставщиков).
Добавьте ссылку на скопированный файл /js/all. js
в
каждого шаблона или страницы, на которой вы хотите использовать Font Awesome.
Дважды проверьте свои пути!
Поскольку вы сами управляете всеми загруженными файлами, убедитесь, что ссылки на ваших страницах
точно соответствуют тому, куда вы переместили все файлы Font Awesome в своем проекте.
Использование только определенных стилей
Хотите использовать только определенные стили значков при использовании наших веб-шрифтов с фреймворком CSS? Папка /css
содержит основные стили и дополнительные файлы для всех параметров стиля Font Awesome — сплошных, обычных, светлых и фирменных. Папка /webfonts
содержит все файлы шрифтов, на которые ссылается приведенный выше CSS и от которых зависит.
Стиль значка | Имя файла веб-шрифта | Имя файла CSS | Доступность |
---|---|---|---|
Font Awesome Brands | fa-brands-400. * | brands.css | Free |
Font Awesome Solid | fa-solid-900.* | Solid.css | БЕСПЛАТНО |
FONT Awesom0037 | FA-Light-300.* | Light.css | Pro Tomply |
Скопируйте эти /Webfonts. когда-либо вы предпочитаете сохранять интерфейсные ресурсы или материалы поставщика). Вы можете удалить файлы стилей
.css
и веб-шрифтов, которые вы не планируете использовать, если хотите.
Добавить ссылку на основной файл стилей ( /css/fontawesome.css
) и CSS для отдельных стилей (например, /css/brands.css
) в
каждого шаблона или страницы, на которой вы хотите использовать Font Awesome. Обратите внимание на путь к вашему проекту и на то, куда вы переместили файлы на предыдущем шаге.
Учитывайте пути в веб-шрифтах
Мы рекомендуем хранить папки /webfonts
и /css
в одном каталоге. Если вы этого не сделаете, вам нужно будет изменить путь к веб-шрифтам, упомянутым в файле CSS каждого стиля.
Хотите использовать только определенные стили при использовании нашего SVG с фреймворком JS?
Папка /js
содержит основной стиль и дополнительные файлы для всех параметров стиля Font Awesome.
Icon Style | JS Filename | Availability |
---|---|---|
Font Awesome Brands | brands.js | Free |
Font Awesome Solid | solid.js | Free |
Font Awesome Regular | regular.js | Pro only |
Font Awesome Ligh | light.js | Pro only |
Copy the fontawesome. js
и любые файлы стилей значков .js
, которые вы хотели бы использовать в каталоге статических ресурсов вашего проекта (или там, где вы предпочитаете хранить внешние ресурсы или материалы поставщика).