Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

243
Visualizações
Cound not find icon react-fontawesome

I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

When I try to use it in my code like this:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

I am getting this error on the console:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

You need to add any icons you wish to use, to a "library" for easy reference.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

Check out working code here: https://codesandbox.io/s/8y251kv448

Also, read this: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

over 4 years ago · Santiago Trujillo Relatório

0

Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.

I had

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

and

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

when, in fact, the actual icon name is just "user", not "faUser":

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}
over 4 years ago · Santiago Trujillo Relatório

0

You can use FontAwesome icons without library like this:

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

<FontAwesomeIcon icon={faCoffee} />

I've installed all the necessary packages as react-fontawesome says:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda