Cómo incluir un icono de Font Awesome en el render de React ()

Siempre que intento usar un ícono de Font Awesome en React render(), no se muestra en la página web resultante, aunque funciona en HTML normal.

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

Aquí hay un ejemplo en vivo: http://jsfiddle.net/pLWS3/

¿Dónde está la culpa?

React usa el classNameatributo, como el DOM.

Si usa la compilación de desarrollo y mira la consola, hay una advertencia. Puede ver esto en jsfiddle.

Advertencia: clase de propiedad DOM desconocida. ¿Quiso decir className?

Si es nuevo en React JS y usa el comando create-react-app cli para crear la aplicación, ejecute el siguiente comando NPM para incluir la última versión de font-awesome.

npm install --save font-awesome

importar font-awesome a su archivo index.js. Simplemente agregue la siguiente línea a su archivo index.js

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

o

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

No olvide usar className como atributo

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

También puede utilizar la react-fontawesomebiblioteca de iconos. Aquí está el enlace: react-fontawesome

Desde la página de NPM, simplemente instale a través de npm:

npm install --save react-fontawesome

Requerir el módulo:

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

Y finalmente, use el <FontAwesome />componente y pase atributos para especificar el icono y el estilo:

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)' }}
      />
    );
  }
});

No olvide agregar el CSS de fuente impresionante a 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

instalar fontawesome y 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

luego en tu componente

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

en index.js

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

luego use íconos como los siguientes:

import React, { Component } from "react";

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

export default Like;

La solución más sencilla es:

Instalar en pc:

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

Importar:

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

Utilizar:

<FontAwesomeIcon icon={ faThumbsUp }/>

Primero debe instalar el paquete.

npm install --save react-fontawesome

O

npm i --save @fortawesome/react-fontawesome

No olvide usar en classNamelugar de class.

Más adelante, debe importarlos en el archivo donde desea usarlos.

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

o

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Después de luchar con esto por un tiempo, se me ocurrió este procedimiento (basado en la documentación de Font Awesome aquí ):

Como se indicó, tendrá que instalar la biblioteca de iconos fontawesome , react-fontawesome y fontawesome :

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

y luego importe todo a su aplicación 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)

Aquí viene la parte difícil:

Para cambiar o agregar íconos, deberá encontrar los íconos disponibles en la biblioteca de módulos de su nodo, es decir

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

Cada ícono tiene dos archivos relevantes: .js y .d.ts, y el nombre del archivo indica la frase de importación (bastante obvio ...), por lo que agregar íconos de enojo , gema y marca de verificación se ve así:

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

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

Para usar los íconos en su código React js, use:

<FontAwesomeIcon icon=icon_name/>

El nombre del icono se puede encontrar en el archivo .js del icono correspondiente:

Por ejemplo, para faCheckCircle busque dentro de faCheckCircle.js para la variable ' iconName ':

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

y el código de React debería verse así:

<FontAwesomeIcon icon=check-circle/> 

¡Buena suerte!

¡La respuesta de Alexander desde arriba realmente me ayudó!

Estaba tratando de obtener íconos de cuentas sociales en el pie de página de mi aplicación que creé con ReactJS para poder agregarles fácilmente un estado flotante mientras también vinculaban mis cuentas sociales. Esto es lo que terminé teniendo que hacer:

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

Luego, en la parte superior de mi componente de pie de página, incluí esto:

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

Mi componente se veía así:

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

Trabajado como un encanto.

En caso de que esté buscando incluir la biblioteca impresionante de fuentes sin tener que hacer importaciones de módulos e instalaciones de npm, coloque esto en la sección principal de su página React index.html :

public / index.html (en la sección principal)

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

Luego, en su componente (como App.js) simplemente use la convención de clase impresionante de fuente estándar. Solo recuerde usar className en lugar de class:

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

npm install --save font-awesome

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

luego

<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>

como dijo 'Praveen MP', puede instalar font-awesome como paquete. si tienes hilo puedes correr:

 yarn add font-awesome

Si no tiene hilo, haga lo que dijo Praveen y haga:

npm install --save font-awesome

esto agregará el paquete a las dependencias de su proyecto e instalará el paquete en su carpeta node_modules. en su archivo App.js agregue

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

Experimenté este caso; Necesito el sitio react / redux que debería funcionar perfectamente en producción.

pero había un "modo estricto"; No debería almorzar con estos comandos.

yarn global add serve
serve -s build

Debería trabajar con solo hacer clic en el archivo build / index.html. Cuando usé fontawesome con npm font-awesome, estaba funcionando en modo de desarrollo pero no en el 'modo estricto'.

Aquí está mi solución:

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 ***

en public / index.html

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

Después de todos los pasos anteriores, el fontawesome funciona BIEN !!!

Checkout reaccionar iconos bastante tonto y funcionó bien.

En mi caso, estaba siguiendo la documentación del react-fontawesomepaquete, pero no tienen claro cómo llamar al ícono al configurar los íconos en la biblioteca.

esto es lo que estaba haciendo:

Archivo App.js

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

Archivo de componentes

<FontAwesomeIcon icon={"coffee"} />

Pero estaba recibiendo este error

Luego agregué el alias al pasar el icono de apoyo como:

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

Y está funcionando, puedes encontrar el valor del prefijo en el archivo icon.js, en mi caso fue: faCoffee.js