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

react>-< font awesome

Question

Cada vez que trato de utilizar un icono Font Awesome en el renderizado de React (), 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 falla?

Answer 1

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

Intentaba obtener íconos de cuentas sociales en el pie de página de mi aplicación que creé con ReactJS para que pudiera agregarles fácilmente un estado de desplazamiento y hacer que vincularan 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.

Answer 2

Checkout reacciona con los iconos de la droga y funciona bien.

Answer 3

Primero debe instalar el paquete.

npm install --save reaccionar-fontawesome
O
npm i --save @ fortawesome / react-fontawesome

No olvides usar className en lugar de class.

Más tarde, tendrá que importarlos en el archivo donde quiera usarlos.

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

O

importar FontAwesomeIcon de ''@ fortawesome / react-fontawesome''

Answer 4

React usa el atributo className , como el DOM.

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

Advertencia: clase de propiedad DOM desconocida. ¿Te refieres a className?

Answer 5

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

npm install --save font-awesome

importa font-awesome a tu archivo index.js Simplemente agregue la línea siguiente 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 olvides usar className como atributo

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

Answer 6

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

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

npm install --save react-fontawesome

Requiere el módulo:

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

Y finalmente, use el <FontAwesome /> y pase los 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)'' }}
      />
    );
  }
});

Answer 7

Tuve experiencia en este caso; Necesito el sitio de reacción / reducción 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

Si trabaja con solo haga clic en el archivo build / index.html. Cuando usé fontawesome con npm font-awesome, funcionaba en modo de desarrollo pero no funcionaba 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 fontanero funciona BIEN!

Answer 8

como ''Praveen MP'' dijo que puedes instalar font-awesome como un paquete. si tienes hilo puedes ejecutar:

 yarn add font-awesome

Si no tienes hilo, haz lo que Praveen dijo y hace:

npm install --save font-awesome

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

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

Answer 9

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

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

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