I want use fontawesome in my react project, i read document and add fontawesome with yarn:

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

and create a ponent like as below:

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class Todo extends Component {
    render() {
        return (
            <div>
                font: <FontAwesomeIcon icon="coffee" />

            </div>
        );
    }
}

export default Todo;

But don't show icon, how fix this?

I want use fontawesome in my react project, i read document and add fontawesome with yarn:

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

and create a ponent like as below:

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class Todo extends Component {
    render() {
        return (
            <div>
                font: <FontAwesomeIcon icon="coffee" />

            </div>
        );
    }
}

export default Todo;

But don't show icon, how fix this?

• javascript
• reactjs
• font-awesome

• You could have a look at this library too. react-iconslify./# – dmraptis Commented Jan 18, 2019 at 16:17

4 Answers 4

If you want to reference the icon by its name you have to declare a library:

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

Then use it like this:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)

Otherwise, you can use explicit imports:

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

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

All this bits of details are explained here. The above examples are from there.

You seem to be missing some imports.

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

library.add(faIgloo)

https://fontawesome./how-to-use/on-the-web/using-with/react

It could be that you are spelling 'fortawesome' and not 'fontawesome'

Firstly you should use npm to install the react package

npm i -g yarn

yarn add react-native-fontawesome

After this you must import the data to start using in your project

import FontAwesome, { Icons } from 'react-native-fontawesome';
 
...
render() {
  return (
    <View>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
        <FontAwesome>{Icons.chevronLeft}</FontAwesome>
        Text
      </Text>
    </View>
  );
},

if you want a more plete tutorial you can access the tutorial clicking here