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


103

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?


2
Tenga en cuenta que algunas respuestas anteriores se refieren a react-fontawesomecuál es v4 y algunas al @fortawesome/fontawesomecomponente oficial que admite v5.
jinglesthula

Y aquí está el enlace actual al react-fontawesome que admite la versión 5: github.com/FortAwesome/react-fontawesome
mojave

Respuestas:


59

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?


¿Es posible que funcione reactjs 15.6? Agregué el enlace index.html <link rel = "shortcut icon" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/… "> pero no funciona
rahuldm

306

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

15
En realidad, esta es la respuesta que mejor aclara la pregunta inicial.
nacho_dh

19
Solo quiero tener en cuenta que con la configuración de create-react-app , no es necesario incluirlo ../node_modules/en la ruta ... import 'font-awesome/css/font-awesome.min.css';funciona :)
plong0

2
Pero de esta manera cuando agregamos íconos como <i className = "far fa-heart"> </i>, no se procesa. Pero si agregamos <i className = "fa fa-heart"> </i>, se renderiza. Porque eso ?
Thidasa Pankaja

3
El uso de @ThidasaParanavitharana <i className="far fa-heart"></i>solo funciona con font-awesome v5. Esta solución instala font-awesome v4
XeniaSis

33

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


14
No olvide agregar el CSS de Font Awesome a su índice también:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
sdgfsdh

8
¿todavía necesita incluir un cdn si lo instala a través de npm?
Amituuush

2
@Amituuush "Instalar" FA a través de NPM (por ahora) no lo coloca donde debe estar. Siempre debe asegurarse de copiarlo a su publiccarpeta correspondiente y agregar la hoja de estilo con la correcta srcmanualmente.
Domi

4
Nuevo enlace CDN: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
guya

4
Autor de react-fontawesome aquí. Deberá incluir los estilos / fuentes en su aplicación de alguna manera, ya sea con una versión CDN o usando algo como WebPack o simplemente enlazando a versiones descargadas. El objetivo de esta biblioteca era no forzar una herramienta como WebPack
Dana Woodman

28

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;

¿Realmente necesitas esto ?: @fortawesome/fontawesome-free-regularya que no se está usando en tu ejemplo.
gmajivu

@gabeno oye no, es solo un ejemplo. Esto debería recordar / mostrarle que también puede usar el otro. Pero gracias por la pista, debería agregar un comentario.
Alexander Sidikov Pfeif

1
¡Excelente! solo necesita modificar este import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon ya no es una exportación predeterminada.
MohitGhodasara

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

14

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

6

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'

6

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!


4

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


4

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>


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

2

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'

2

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



0

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

ingrese la descripción de la imagen aquí 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


Para la primera opción, debería estar haciendo:<FontAwesomeIcon icon={faCoffee} />
gildniy
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.