Font awesome react не работает

Как включить значок Font Awesome в Render () React

Каждый раз, когда я пытаюсь использовать значок Font Awesome в React render() , он не отображается на результирующей веб-странице, хотя работает в обычном HTML.

React использует className атрибут, как DOM.

Если вы используете сборку разработки и посмотрите на консоль, появится предупреждение. Вы можете увидеть это на jsfiddle.

Предупреждение: неизвестный класс свойств DOM. Вы имели в виду className?

Если вы новичок в React JS и используете команду create-react-app cli для создания приложения, выполните следующую команду NPM, чтобы включить последнюю версию font-awesome.

импортируйте font-awesome в ваш файл index.js. Просто добавьте строку ниже в свой файл index.js

Не забудьте использовать className как атрибут

Вы также можете использовать react-fontawesome библиотеку значков. Вот ссылка: react-fontawesome

Со страницы NPM просто установите через npm:

И, наконец, используйте компонент и передайте атрибуты, чтобы указать значок и стиль:

Не забудьте добавить отличный шрифт CSS в index.html:

установить fontawesome и react-fontawesome

тогда в вашем компоненте

затем используйте значки, как показано ниже:

Самое простое решение:

Сначала вам нужно установить пакет.

Не забывайте использовать className вместо class .

Позже вам нужно будет импортировать их в файл, в котором вы хотите их использовать.

После некоторой борьбы с этим я придумал эту процедуру (основанную на документации Font Awesome здесь ):

Как уже говорилось, вам необходимо установить библиотеку значков fontawesome , react-fontawesome и fontawesome :

а затем импортируйте все в свое приложение React:

А вот и сложная часть:

Чтобы изменить или добавить значки, вам нужно будет найти доступные значки в библиотеке модулей узла, т.е.

У каждого значка есть два соответствующих файла: .js и .d.ts, а имя файла указывает фразу импорта (довольно очевидно . ), поэтому добавление значков сердитого , драгоценного камня и галочки выглядит так:

Чтобы использовать значки в коде React js, используйте:

Имя значка можно найти в файле .js соответствующего значка:

Источник

Как включить значок шрифта Awesome в рендеринг React()

всякий раз, когда я пытаюсь использовать значок шрифта Awesome в render () React, он не отображается на результирующей веб-странице, хотя он работает в обычном HTML.

вот живой пример:http://jsfiddle.net/pLWS3/

9 ответов

React использует className атрибут, как DOM.

Если вы используете сборку разработки и смотрите на консоль, появляется предупреждение. Вы можете увидеть это на jsfiddle.

предупреждение: неизвестный класс свойств DOM. Вы имели в виду имя?

если вы новый, чтобы реагировать JS и с помощью create-react-app cli команда для создания приложения, затем запустите следующую команду NPM, чтобы включить последнюю версию шрифта-awesome.

импорт шрифта-awesome для вашего индекса.файл js. Просто добавьте строку ниже к индексу.файл JS

Не забудьте использовать className как атрибут

вы также можете использовать react-fontawesome библиотека значок. Вот ссылка: реагировать-fontawesome

со страницы NPM просто установите через npm:

и, наконец, используйте компонент и передать атрибуты, чтобы указать значок и стиль:

не забудьте добавить шрифт-удивительный CSS в индекс.HTML-код:

установить fontawesome & react-fontawesome

чем в компоненте

Я был опытным в этом случае; мне нужен сайт react / redux, который должен отлично работать в производстве.

но был «строгий режим»; не следует обедать с этими командами.

должен работать только с щелчком мыши по сборке / индексу.HTML-файл. Когда я использовал fontawesome с npm font-awesome, он работал в режиме разработки, но не работал в «строгом режиме».

вот мое решение:

in индекс государственных/.HTML-код

после всех вышеуказанных шагов, fontawesome работает хорошо.

сначала необходимо установить пакет.

npm install —save react-fontawesome
Или
npm i — save @fortawesome / react-fontawesome

Не забудьте использовать className вместо класса.

далее нужно импортировать их в файл, где вы хотите их использовать.

импорт шрифта-awesome / css / font-awesome.минута.в CSS’

импорт FontAwesomeIcon от «@fortawesome / react-fontawesome»

как «Praveen M P» сказал, что вы можете установить шрифт-awesome в качестве пакета. если у вас есть пряжа вы можете запустить:

Если у вас нет пряжи, сделайте, как сказал Правин, и сделайте:

это добавит пакет к зависимостям ваших проектов и установит пакет в папку node_modules. в вашем приложении.JS-файла добавить

ответ Александра сверху действительно помог мне!

Я пытался получить значки социальных учетных записей в нижнем колонтитуле моего приложения, созданного с помощью ReactJS, чтобы я мог легко добавить к ним состояние наведения, а также связать их с моими социальными учетными записями. Вот что мне пришлось сделать:—4—>

затем в верхней части моего нижнего колонтитула я включил это:

Источник

Иконки FontAwesome не работают должным образом в приложении React / Next

Решено — TLDR; Добавление import ‘@fortawesome/fontawesome-svg-core/styles.css’ в файл _app.js / index.js устраняет проблему, и FontAwesome работает должным образом. Моя проблема была вызвана тем, что npx-create-next-app по умолчанию включал purgeCSS, который, в свою очередь, удалил необходимые стили FontAwesome.

Я использую FontAwesome в своем приложении Next. Я следовал Руководству по React на FA. веб-сайт и значок SVG выводятся на страницу. Проблема в том, что ни одна из функций работают, и они не масштабируются с размером шрифта, как задумано.

Я не хочу взламывать это вместе, вручную настраивая SVG и добавляя размер и т. Д., Поскольку это не идеально, когда дело доходит до отзывчивости. то есть было бы неплохо иметь масштабные значки с сопроводительным текстом и возможность добавлять «счетчик», «фиксированную ширину» и т. д.

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

Я также пробовал индивидуальное использование (импорт значков в отдельные компоненты, а не использование функции библиотеки) с тем же эффектом. Вот так:

3 ответа

Похоже, это как-то связано с purgeCSS, который используется по умолчанию при использовании create-next-app , удаляющего требуемый CSS.

Добавление import ‘@fortawesome/fontawesome-svg-core/styles.css’ устраняет проблему, и FontAwesome работает должным образом. В моем случае я добавил это в начало _app.js

По сути, все, что вам нужно сделать, это:

И используйте это:

Вы можете добавить имя класса к значку и использовать этот класс для его стилизации.

Вот хорошее видео о добавлении отличных иконок шрифтов в next.js: https://youtu.be/kaA2aX4X3NU

Я использую FontAwesomeIcon в своих приложениях React, вот так, и он работает:

Источник

Использование Font Awesome 5 в проекте React

Font Awesome – это набор инструментов для веб-сайтов, который содержит иконки и логотипы социальных сетей. React – это гибкая библиотека для написания кода, которая часто используется для создания пользовательских интерфейсов. Команда Font Awesome создала специальный компонент React для содействия интеграции. В этом руководстве мы поговорим о Font Awesome 5 и его структуре. Также вы узнаете, как использовать компонент React Font Awesome.

Требования

Вам не обязательно писать код, чтобы проходить это руководство, но если вы хотите попробовать выполнить пару примеров, вам понадобится следующее:

• Локальная установка Node.js. Следуйте инструкциям для вашего дистрибутива: mac OS, Ubuntu, Debian, CentOS.
• Инструмент Create React App.

1: Использование Font Awesome

Команда Font Awesome создала компонент React, чтобы вы могли без труда использовать их вместе. С помощью этой библиотеки вы можете следовать нашему руководству (но сначала выберите иконку).

В примерах этого руководства мы будем использовать иконку home, а вся работа будет происходить в файле App.js. откройте этот файл:

Итак, после этого в приложении появится маленькая иконка home. Как видите, этот код выбирает только иконку home, следовательно, к размеру пакета нашего приложения добавляется только размер одной иконки.

После монтирования этого компонента инструмент Font Awesome заменит его SVG-версией выбранной иконки.

2: Выбор иконок

Прежде чем мы продолжим работу, важно разобраться, как структурированы библиотеки Font Awesome. Поскольку иконок в библиотеке очень много, команда решила разделить их на несколько пакетов.

Чтобы изучить возможные варианты и выбрать необходимые иконки, рекомендуется посетить специальную страницу на сайте Font Awesome. В левой части этой страницы вы найдете различные фильтры – они очень важны, потому что именно они сообщают, из какого пакета импортировать ту или иную иконку.

В приведенном выше примере мы извлекли иконку из пакета @fortawesome/free-solid-svg-icons.

Как определить, какому пакету принадлежит иконка?

Чтобы определить, к какому пакету относится нужная вам иконка, просмотрите на фильтры слева. Также можно кликнуть на иконку и увидеть пакет, которому он принадлежит.

Когда вы узнаете название необходимого вам пакета, важно запомнить его трехбуквенное сокращение:

• Solid Style – fas
• Regular Style – far
• Light Style – fal
• Duotone Style – fad

Найти определенный тип можно в левой панели на странице иконок.

Как использовать иконки из определенных пакетов?

Если вы внимательно просмотрите страницу иконок на сайте Font Awesome, вы заметите, что одна и та же иконка обычно существует в нескольких версиях. Например, введите в поиск boxing-glove – в результате вы увидите три иконки.

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

Примечание: Следующие примеры не будут работать, пока мы не создадим библиотеку иконок – мы сделаем это немного позже.

Вот пример для пакета solid:

Этот пакет используется по умолчанию, если не указано другое:

Пакет light используется с помощью сокращения fal:

Свойство icon нужно было изменить со строки на массив.

3: Установка Font Awesome

Поскольку существует несколько версий одной иконки, несколько пакетов, а также бесплатные/профессиональные пакеты в придачу, для их установки требуется несколько пакетов npm. Вероятно, вам придется установить сразу несколько пакетов и только после этого выбрать нужные иконки.

В этом мануале мы продемонстрируем, как установить несколько пакетов.

Выполните следующую команду, чтобы установить базовые пакеты:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Следующая команда установит иконки regular:

npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

Эта команда установит solid:

npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

Используйте эту команду для установки иконок light:

npm i -S @fortawesome/pro-light-svg-icons

Эта команда установит иконки duotone:

npm i -S @fortawesome/pro-duotone-svg-icons

Следующая команда установит значки брендов:

npm i -S @fortawesome/free-brands-svg-icons

Если вы хотите установить все пакеты за один раз, вы можете использовать эту команду:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Эта команда устанавливает все бесплатные иконки.

Если у вас есть профессиональная учетная запись Font Awesome, вы можете использовать следующую команду:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

Она установит все иконки, включая профессиональные.

Итак, вы установили пакеты, но еще не использовали их в своем приложении и не добавляли их в пакет своего приложения. Давайте посмотрим, как это сделать.

4: Создание библиотеки иконок

Импортировать нужную иконку в несколько файлов – не всегда простая задача. Допустим, если вы используете логотип Twitter в нескольких местах, вам едва ли захочется писать его несколько раз.

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

Давайте создадим файл fontawesome.js в папке src, а затем импортируем его в index.js. Вы сможете добавлять этот файл во все дочерние компоненты, в которых вы хотите использовать иконки. Вы даже можете сделать это прямо в своем файле index.js или App.js. Однако лучше собрать все иконки в отдельный файл, поскольку он может увеличиться со временем.

Итак, поместите в src/fontawesome.js следующее:

Теперь этот файл нужно импортировать в index.js. откройте его и внесите строку:

Импорт целого пакета иконок

Импортировать пакеты иконок целиком не рекомендуется, потому что при этом вы импортируете в свое приложение слишком много лишних иконок, из-за чего пакет увеличится в размере. Если вам действительно нужен весь пакет, вы, безусловно, можете импортировать его.

Предположим для примера, что вам нужны все иконки брендов из пакета @fortawesome/free-brands-svg-icons. Чтобы импортировать все иконки, нужно открыть файл fontawesome.js и использовать следующее:

fab импортирует весь пакет с иконками брендов.

Индивидуальный импорт иконок

Рекомендуемый способ использования иконок из Font Awesome – импортировать их поштучно и только нужные, чтобы окончательные размеры вашего пакета были как можно меньше.

В файле fontawesome.js вы можете создать библиотеку из нескольких иконок, хранящихся в разных пакетах, например:

Импорт одной иконки из нескольких пакетов

Если вам нужны все доступные типы иконки boxing-glove (то есть иконки из пакетов fal, far и fas), вы можете импортировать их все под другим именем и затем добавить в свой fontawesome.js.

Затем вы можете использовать их при помощи разных префиксов.

5: Использование иконок

Теперь, когда вы установили все то, что вам нужно, и добавили иконки в библиотеку Font Awesome, мы можем использовать их и определить их размеры. В этом мануале мы будем использовать пакет light (fal).

В первом примере мы установим нормальный размер:

Во втором примере мы попробуем использовать именованный размер, в нем используются сокращения для small (sm), medium (md), large (lg) и extra-large (xl):

Третий вариант – использовать нумерованные размеры (максимальное значение здесь – 6):

Нумерованные размеры позволяют использовать десятичные дроби, чтобы подобрать идеальный размер:

Font Awesome стилизует свои SVG, используя цвет текста CSS. Если мы поместим тег

туда, где будет расположена иконка, цвет иконки будет совпадать с цветом текста:

Font Awesome также предлагает функцию power transforms, с помощью которой вы можете объединять различные преобразования в рамках одной строки:

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

Иконки фиксированной ширины

Если все ваши иконки должны быть одинаковой ширины, Font Awesome позволяет использовать свойство fixedWidth. Допустим, вам нужна фиксированная ширина иконок для выпадающего меню в навигации:

Вращающиеся иконки

Вращение иконок применяется на кнопках форм (в частности при обработке форм). Вы можете использовать вращающуюся иконку, чтобы создать общепринятый эффект для загрузки:

Вы можете использовать свойство spin где угодно:

Маскировка иконок (продвинутая функция)

Font Awesome позволяет комбинировать две иконки и создавать таким образом эффекты маскировки. При этом нужно сначала определить обычную иконку, а затем использовать свойство mask, чтобы определить вторую, которая будет расположена поверх первой. Первая иконка при этом будет ограничена размерами маскирующей иконки.

В этом примере мы создали фильтры тегов, используя маскировку:

Обратите внимание: мы можем связать несколько свойств transform и с их помощью переместить внутреннюю иконку так, чтобы она соответствовала маскирующей иконке по размерам.

Мы даже можем раскрасить и изменить фоновый логотип с помощью Font Awesome.

6: react-fontawesome и иконки вне React

Если вы работаете не с одностраничным приложением (SPA), а с традиционным сайтом на React, вы можете избежать импорта главной библиотеки SVG/JS и библиотеки react-fontawesome. Для этого Font Awesome создал возможность использования библиотек React для отслеживания иконок вне компонентов React.

Если у вас есть , вы можете попросить Font Awesome просматривать и обновлять их. Для этого используйте следующее:

MutationObserver – это веб-технология, которая позволяет нам оперативно отслеживать изменения в DOM. Узнать больше о ней можно в документации React Font Awesome.

Заключение

Font Awesome и React – отличное сочетание, но при этом возникает необходимость в использовании нескольких пакетов иконок и поиске оптимальных комбинаций. В этом мануале мы поговорили об основах использования Font Awesome и React.

Источник