Download font awesome: Get Started on the Desktop

Начало работы на рабочем столе

Значки 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 /svgs 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 , которые вы хотели бы использовать в каталоге статических ресурсов вашего проекта (или там, где вы предпочитаете хранить внешние ресурсы или материалы поставщика).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *