Как подключить на сайт font awesome: Начало работы с Font Awesome

или

Спасибо, просто скачать
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 вы должны войти в Параметры темы – Интеграция и вставить этот код в поле с надписью Добавить код в заголовок вашего блога .

Когда вы нажмете «Сохранить», вы можете начать добавлять любые значки, которые вы хотите, как мы делали выше. Только у вас нет доступа к шорткоду при этом.

Если ваша тема не поддерживает интеграцию кода

Если вы не можете найти такое место в своей теме, это также легко сделать вручную. Однако для этого вам придется копаться в файлах 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 для определенного размера.

Кроме того, если вам нужно, чтобы значок был относительно определенного размера и абсолютные значения не работали, вы можете поместить его в собственный

, чтобы он работал в рамках ваших ограничений.

Завершение

И это все! Круто, верно? Независимо от того, используете ли вы плагин Font Awesome WordPress или вставляете код вручную, для запуска  сайта достаточно нескольких шагов. Font Awesome популярен по определенной причине, и отчасти это объясняется простотой использования. 

Какой ваш любимый способ использовать иконки Font Awesome?

Статья с изображением любезно предоставлена ​​Font Awesome

Как добавить иконки | Font Awesome Docs

Вы можете размещать значки Font Awesome практически в любом месте, и мы постарались сделать так, чтобы значки приобретали характеристики и естественным образом сливались с окружающим текстом.

Мы рассмотрим основы того, как добавлять значки в ваш проект, сокращенные имена классов для различных стилей значков, как добавлять значки в HTML, использовать псевдонимы значков и многое другое!

Перед началом работы

Убедитесь, что у вас есть:

• Настройте Font Awesome в своем проекте и узнайте, где вы припарковали свою Тардис.

Основы

Чтобы добавить значок, вам необходимо знать несколько битов информации:

1. Сокращенное имя класса для стиля , который вы хотите использовать
2. Имя значка с префиксом fa-90 (означает «Font Awesome» естественно!)
3. Сокращенное имя класса для семейства , которое вы хотите использовать Дополнительно

Семейства + стили

Существует три семейства иконок Font Awesome, каждое из которых имеет уникальный внешний вид, имя класса и семейство шрифтов @font-face . И в Font Awesome Classic, и в Sharp есть пять стилей значков Font Awesome. Вот несколько примеров:

Classic Family

Sharp Family

Бренды Семейство

Kit Custom Icons (from a downloaded Kit)

Добавление значков в HTML

Мы разработали Font Awesome для использования с встроенными элементами , и мы рекомендуем вам придерживаться последовательного элемента в вашем проекте. Мы рекомендуем использовать элемент с CSS-классами Font Awesome для стиля , класс для стиля значка, который вы хотите использовать, и класс имени значка с префиксом fa- для значка, который вы хотите использовать. использовать. Люди, ориентированные на доступность, могут выбрать 9Элемент 0028 вместо .

Вот пример:

Установка различных семейств + стилей

А вот пример, который ссылается на разные стили и семейства значков:

Псевдонимы

Мы обновили многие из наших имен значков в Версии 6, чтобы сделать их более универсальными и последовательно. Но мы хотели убедиться, что ваш существующий код не сломается, поэтому мы создали псевдонимы для переименованных значков, чтобы они могли работать как со старыми, так и с новыми именами.

Вы также можете использовать старое или новое имя для стилей. Таким образом, вы все равно можете использовать fas , far , fal , fad и fab . И мы также включили старые версии префикса для нашего нового стиля Thin ( fat ) и нового семейства стилей Sharp (Sharp Solid — это fass , а Sharp Regular — fasr ).

Альтернативные способы добавления значков

У нас также есть много других способов добавления значков Font Awesome, если в вашей ситуации требуется что-то особенное:

При использовании веб-шрифтов

• Добавьте значки, используя только CSS с псевдоэлементами.

При использовании SVGS

• Использование SVG без JS с использованием наших SVG Sprites
• Принесите стиль с нашими голыми SVGS
• Использование символов SVG для повышения производительности с повторяющимися Icons
• . Разместите сами — веб-шрифты

  Если вам нравится управление, вы можете сами разместить Font Awesome и выбрать использование веб-шрифтов + CSS, описанных ниже, или SVG + JS, чтобы добавить значки в свои проекты.

  Мы рассмотрим основы настройки веб-шрифтов и способы использования определенных стилей значков Font Awesome.

  Перед началом работы

  Убедитесь, что вы:

  • Загрузите файлы Font Awesome v6 и держите их под рукой.
  • Хотите использовать метод WebFonts+CSS Font Awesome.

  Настройка с помощью веб-шрифтов

  Внутри Font Awesome Загрузив или упаковав, вы найдете нужные вам файлы. Папка /css содержит основные стили и утилиты для всех семейств Font Awesome (Classic, Sharp и Brands), а также параметры стилей (Solid, Regular, Light, Duotone и Thin). 9Папка 0028 /webfonts содержит все файлы шрифтов, от которых зависят файлы CSS.

  В нашей версии для загрузки Pro есть бесплатная и профессиональная версии каждого из них — выберите ту, которая подходит для вашего проекта, и загрузите эти файлы.

  , которые файлы и папки	Что там
  /Fontawesom	CSS files for using Web Fonts
  /fontawesome6/free/webfonts	Just the Free Icons as Web Fonts to be used with CSS
  /fontawesome6/free/css	CSS файлы для использования только бесплатных веб-шрифтов

  Добавьте файлы Font Awesome в свой проект

  Скопируйте папки /webfonts и /css в каталог статических активов вашего проекта (или куда вы предпочитаете сохранять передний план). — конечные активы или материалы поставщика). Не забудьте включить основной файл стилей — /css/fontawesome.css , а также файлы CSS для любых отдельных стилей, которые вы хотите использовать, и вы можете удалить любые .css и файлы веб-шрифтов, которые вы не планируете использовать.

  Copy webfonts and CSS assets into one of your project directories

  Here’s a handy table that shows which files go with which styles:

  Icon Style	Availability	Web Font Filename	CSS Filename
  Brands	Free	fa-brands-400.*	brands.css
  Solid	Free	fa-solid-900.*	solid. CSS
  Обычный	PRO только	FA-REGULAR-400.*	Регулярный. css
  9.6618 66666618 6618 6666618 6666618 618 66618 618 66666618 6618 6618	8 .0029	light.css
  Thin	Pro only	fa-thin-100.*	thin.css
  Duotone	Pro only	fa-duotone -900.*	Duotone.css
  Sharp Solid	PRO только	FA-SHARP-SOLID-900.*	.	PRO только	FA-Sharp-Solid-400.*	Sharp-Regular.css

  Справочный Font Awesom файлы CSS для тех стилей, которые вы хотите использовать, в

  каждого шаблона или страницы, на которые вы планируете добавить значки. Убедитесь, что пути правильно указывают на то, куда вы поместили файлы!

  Вот пример html-страницы со ссылками на файлы в и парочка иконок в содержании.

  Только на этот раз мы рекомендуем отпустить все мысли в голову.

  Дважды проверьте свои пути

  Убедитесь, что пути файлов, которые вы включили в ваших страниц, указывают на то, куда вы переместили все файлы Font Awesome в своем проекте.

  Юсс! Вы готовы добавить значки

  Как сказал Энакин, это очень круто! Все наши иконки теперь готовы выполнить ставку вашего проекта. Узнайте, как добавить их в свой проект, а затем используйте их силу, чтобы внести порядок и стиль в свой пользовательский интерфейс!

  Добавьте иконки!

  ---

  Альтернативная установка: использование all.css

  В папке /css вы могли заметить файл с именем all.css . Этот файл содержит основные стили и утилиты ПЛЮС все значки во всех классических стилях в Font Awesome. (Семейство Sharp не включено в файл all.css — вам нужно добавить файлы Sharp . css отдельно.)

  Это удобный файл, если вы будете использовать все стили значков. или тестировать разные стили по мере разработки вашего проекта. Но если вы используете всего пару стилей, мы не рекомендуем его для рабочих сайтов, так как загрузка всех значков и файлов не очень хороша для производительности.

  Если вы хотите использовать all.css , просто скопируйте папку /webfonts и файл /css/all.css в каталог ресурсов вашего проекта, где хранятся другие изображения и CSS. Вы захотите сохранить их в одном каталоге.

  Затем добавьте ссылку на файл /your-path-to-fontawesome/css/all.css в каждого шаблона или страницы, где вы хотите использовать Font Awesome.

  ---

  Размещение собственного загруженного комплекта

  Начиная с версии 6.4, теперь вы можете загрузить комплект и разместить его самостоятельно, как вы это делаете с Font Awesome! Чтобы загрузить комплект, убедитесь, что версия комплекта в настройках установлена ​​на «Последняя 6. x» или, если вы выбрали конкретную версию, она должна быть не ниже 6.4 . Затем на вкладке «Настройка» в вашем наборе вы увидите варианты загрузки.

  Пользовательские значки в загруженных наборах

  Если в вашем наборе есть пользовательские значки, они будут включены в загрузку вашего набора. Вы найдете эти дополнительные файлы, включенные в ZIP-файл загрузки:

  Путь к файлам	Что делают файлы
  /css/custom-icons.css	. custom-icons.js /js/custom-icons.min.js	Обрабатывает отображение пользовательских значков с помощью SVG+JS
  /sprites/custom-icons.svg 12 Все ваши пользовательские значки 2 иконки в одном спрайте SVG
  /SVGS/Custom-ICONS/	Папка, содержащая все ваши пользовательские значки в виде SVGS
  /WEBFONTS/CUSTOM-ICONS. WOFF	. Пользовательский шрифт значков в форматах WOFF2 и TTF
  /scss/custom-icons.scss и /less/custom-icons.less	Частицы препроцессора Sass (SCSS) и Less, которые обрабатывают отображение пользовательских значков с веб-шрифтами

  Эти файлы будут работать так же, как файлы и ресурсы Font Awesome. И если вы используете all.js или all.css , ваши пользовательские значки будут включены в них, хотя из соображений производительности мы рекомендуем добавлять только те файлы, которые вы используете в своем проекте.

  Вот пример проекта с использованием Sharp Solid и пользовательских значков из загруженного комплекта:

  Использовать пользовательские значки комплекта очень просто.

  ---

  Совместимость со старыми версиями

  Если в вашем проекте используется более старая версия Font Awesome, мы обеспечим вам обратную совместимость.