Como incluir um ícone de fonte impressionante na renderização do React ()


99

Sempre que tento usar um ícone Font Awesome no React's render(), ele não é exibido na página da web resultante, embora funcione em HTML normal.

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

Aqui está um exemplo ao vivo: http://jsfiddle.net/pLWS3/

Onde está a culpa?


2
Observe que algumas respostas mais antigas referem-se a react-fontawesomequal é v4, e algumas ao @fortawesome/fontawesomecomponente oficial que oferece suporte a v5.
jinglesthula

E aqui está o link atual para react-fontawesome que suporta a versão 5: github.com/FortAwesome/react-fontawesome
mojave

Respostas:


57

O React usa o classNameatributo, como o DOM.

Se você usar o build de desenvolvimento e olhar para o console, há um aviso. Você pode ver isso no jsfiddle.

Aviso: classe de propriedade DOM desconhecida. Você quis dizer className?


é possível trabalhar reactjs 15.6 eu adicionei o link index.html <link rel = "shortcut icon" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/… "> mas não funciona
rahuldm

301

Se você for novo no React JS e estiver usando o comando create-react-app cli para criar o aplicativo, execute o seguinte comando NPM para incluir a versão mais recente do font-awesome.

npm install --save font-awesome

import font-awesome para seu arquivo index.js. Basta adicionar a linha abaixo ao seu arquivo index.js

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

ou

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

Não se esqueça de usar className como atributo

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

15
Esta é realmente a resposta que melhor esclarece a questão inicial.
nacho_dh

18
Só quero observar que, com a configuração de criar-reagir-app , você não precisa incluir ../node_modules/no caminho ... import 'font-awesome/css/font-awesome.min.css';funciona :)
plong0 01 de

2
Mas desta forma, quando adicionamos ícones como <i className = "far fa-heart"> </i>, ele não renderiza. Mas se adicionarmos <i className = "fa fa-heart"> </i>, ele renderiza. Por que isso ?
Thidasa Pankaja

3
@ThidasaParanavitharana usando <i className="far fa-heart"></i>apenas funciona com a incrível fonte v5. Esta solução instala o font-awesome v4
XeniaSis

33

Você também pode usar a react-fontawesomebiblioteca de ícones. Aqui está o link: react-fontawesome

Na página NPM, basta instalar via npm:

npm install --save react-fontawesome

Requer o módulo:

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

E, finalmente, use o <FontAwesome />componente e passe atributos para especificar o ícone e o 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)' }}
      />
    );
  }
});

Não se esqueça de adicionar o CSS incrível da fonte em index.html:

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


14
Não se esqueça de adicionar o css Font Awesome ao seu índice também:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
sdgfsdh

8
você ainda precisa incluir um cdn se instalá-lo via npm?
Amituuush

2
@Amituuush "Instalar" o FA via NPM (por enquanto) não o coloca onde precisa estar. Você deve sempre certificar-se de copiá-lo para a publicpasta correspondente e adicionar a folha de estilo com o correto srcmanualmente.
Domi

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

4
Autor de react-fontawesome aqui. Você precisará incluir os estilos / fontes em seu aplicativo de alguma forma, seja com uma versão CDN ou usando algo como WebPack ou apenas vinculando a versões baixadas. O objetivo com esta biblioteca era não forçar você a usar uma ferramenta como o WebPack
Dana Woodman

28

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

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

então em seu 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;

Você realmente precisa disso: @fortawesome/fontawesome-free-regularjá que não está sendo usado no seu exemplo.
gmajivu

@gabeno ei não, é apenas um exemplo. Isso deve apenas lembrar / mostrar que você também pode usar o outro. Mas, obrigado pela dica, devo adicionar um comentário.
Alexander Sidikov Pfeif

1
Ótimo! só precisa modificar este import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon não é mais exportação padrão.
MohitGhodasara

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

em index.js

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

em seguida, use os ícones abaixo:

import React, { Component } from "react";

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

export default Like;

13

A solução mais simples é:

Instalar:

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

Usar:

<FontAwesomeIcon icon={ faThumbsUp }/>

5

Você precisa instalar o pacote primeiro.

npm install --save react-fontawesome

OU

npm i --save @fortawesome/react-fontawesome

Não se esqueça de usar em classNamevez de class.

Mais tarde, você precisa importá-los no arquivo onde deseja usá-los.

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

ou

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

5

Depois de lutar com isso por um tempo, eu vim com este procedimento (com base na documentação do Font Awesome aqui ):

Conforme declarado, você terá que instalar a biblioteca de ícones fontawesome , react-fontawesome e fontawesome :

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

e importe tudo para seu aplicativo 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)

Aqui vem a parte complicada:

Para alterar ou adicionar ícones, você terá que encontrar os ícones disponíveis em sua biblioteca de módulos de nó, ou seja,

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

Cada ícone tem dois arquivos relevantes: .js e .d.ts, e o nome do arquivo indica a frase de importação (bastante óbvio ...), então adicionar os ícones angry , gem e check-mark tem a seguinte aparência:

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

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

Para usar os ícones em seu código React js, use:

<FontAwesomeIcon icon=icon_name/>

O nome do ícone pode ser encontrado no arquivo .js do ícone relevante:

por exemplo, para faCheckCircle, olhe dentro de faCheckCircle.js para a variável ' iconName ':

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

e o código React deve ser semelhante a este:

<FontAwesomeIcon icon=check-circle/> 

Boa sorte!


3

A resposta de Alexander de cima realmente me ajudou!

Eu estava tentando obter ícones de contas sociais no rodapé do meu aplicativo que criei com ReactJS para que eu pudesse adicionar facilmente um estado de foco a eles ao mesmo tempo em que vinculavam minhas contas sociais. Isso é o que acabei tendo que fazer:

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

Então, no topo do meu componente de rodapé, incluí isto:

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

Meu componente era assim:

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

Funcionou como um encanto.


3

Caso você queira incluir a incrível biblioteca de fontes sem ter que fazer importações de módulos e instalações de npm, coloque isso na seção head de sua página React index.html :

public / index.html (na seção head)

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

Em seguida, em seu componente (como App.js), use apenas uma convenção de classe de fonte padrão incrível. Lembre-se de usar className em vez de class:

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


3
npm install --save font-awesome

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

então

<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

Eu fui vivenciado neste caso; Eu preciso do site react / redux que deve estar funcionando perfeitamente na produção.

mas havia um 'modo estrito'; Não devo almoçar com esses comandos.

yarn global add serve
serve -s build

Deve trabalhar com apenas clique no arquivo build / index.html. Quando usei o fontawesome com npm font-awesome, ele estava funcionando no modo de desenvolvimento, mas não no 'modo estrito'.

Aqui está minha solução:

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

em public / index.html

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

Depois de todas as etapas acima, o fontawesome funciona BEM !!!


1

como 'Praveen MP' disse, você pode instalar o font-awesome como um pacote. se você tem fio, pode executar:

 yarn add font-awesome

Se você não tem fio, faça o que Praveen disse e faça:

npm install --save font-awesome

isso adicionará o pacote às dependências do seu projeto e instalará o pacote na pasta node_modules. no seu arquivo App.js, adicione

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


0

No meu caso, eu estava seguindo a documentação do react-fontawesomepacote, mas eles não estão claros sobre como chamar o ícone ao definir os ícones na biblioteca

era isso que eu estava fazendo:

Arquivo App.js

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

Arquivo de componente

<FontAwesomeIcon icon={"coffee"} />

Mas eu estava recebendo este erro

insira a descrição da imagem aqui Em seguida, adicionei o alias ao passar a propriedade do ícone como:

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

E está funcionando, você pode encontrar o valor do prefixo no arquivo icon.js, no meu caso era: faCoffee.js


Para a primeira opção, você deve fazer:<FontAwesomeIcon icon={faCoffee} />
gildniy
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.