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

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

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

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

В чем вина?

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

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

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

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

npm install --save font-awesome

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

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

или

import 'font-awesome/css/font-awesome.min.css';

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

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

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

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

npm install --save react-fontawesome

Требуется модуль:

var FontAwesome = require('react-fontawesome');

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

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

https://github.com/FortAwesome/react-fontawesome

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

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-svg-core

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

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

npm install --save-dev @fortawesome/fontawesome-free

в index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

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

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;

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

Установить:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Импортировать:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

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

<FontAwesomeIcon icon={ faThumbsUp }/>

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

npm install --save react-fontawesome

ИЛИ

npm i --save @fortawesome/react-fontawesome

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

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

import 'font-awesome/css/font-awesome.min.css'

или

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

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

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

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

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

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

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

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

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

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

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

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

<FontAwesomeIcon icon=icon_name/>

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

например, для faCheckCircle загляните в faCheckCircle.js для переменной ' iconName ':

...
var iconName = 'check-circle'; 
... 

и код React должен выглядеть так:

<FontAwesomeIcon icon=check-circle/> 

Удачи!

Если вы хотите включить библиотеку font awesome без необходимости импорта модулей и установки npm, поместите ее в головной раздел страницы React index.html :

public / index.html (в головном разделе)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Затем в вашем компоненте (например, App.js) просто используйте стандартное соглашение о классах шрифтов. Просто не забудьте использовать className вместо class:

<button className='btn'><i className='fa fa-home'></i></button>

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

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

$ npm i --save @fortawesome/fontawesome-free-brands

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

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

Тогда мой компонент выглядел так:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

Работал как шарм.

npm install --save font-awesome

import 'font-awesome/css/font-awesome.min.css';

тогда

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

как сказал Praveen MP, вы можете установить font-awesome в виде пакета. если у вас есть пряжа, вы можете запустить:

 yarn add font-awesome

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

npm install --save font-awesome

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

import 'font-awesome/css/font-awesome.min.css'

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

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

yarn global add serve
serve -s build

Должен работать только с файлом build / index.html. Когда я использовал fontawesome с npm font-awesome, он работал в режиме разработки, но не работал в «строгом режиме».

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

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

в public / index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

После всех вышеперечисленных шагов fontawesome работает НАСТОЯТЕЛЬНО !!!

Касса реагирует на значки довольно круто и работает хорошо.

В моем случае я следовал документации для react-fontawesomeпакета, но они не понимают, как вызывать значок при установке значков в библиотеку.

вот что я делал:

Файл App.js

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Компонентный файл

<FontAwesomeIcon icon={"coffee"} />

Но я получал эту ошибку

Затем я добавил псевдоним при передаче свойства значка, например:

<FontAwesomeIcon icon={["fal", "coffee"]} />

И он работает, вы можете найти значение префикса в файле icon.js, в моем случае это было: faCoffee.js