CODEWITHSUNDEEP
javascriptreactjsfont-awesome
Masoud92m
Masoud92m

Reputation: 622

How to use fontawesome in react?

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 component 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?

Upvotes: 4

Views: 6607

Answers (4)

Lucas
Lucas

Reputation: 301

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 complete tutorial you can access the tutorial clicking here

Upvotes: -1

Gramatiik
Gramatiik

Reputation: 122

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.

Upvotes: 4

isherwood
isherwood

Reputation: 61063

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.com/how-to-use/on-the-web/using-with/react

Upvotes: 1

remoo
remoo

Reputation: 185

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

Upvotes: 1

Related Questions