How to use fontawesome in react?

Question

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?

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

Gramatiik · Accepted Answer · 2019-01-18 16:17:44Z

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.

How would you use it so you pass in a number - as in a shopping cart icon and overlay the number of items in cart on top of the icon?

isherwood · Accepted Answer · 2019-01-18 16:15:31Z

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

remoo · Accepted Answer · 2019-01-18 16:11:11Z

1

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

answered Jan 18, 2019 at 16:11

remoo

1851 gold badge1 silver badge10 bronze badges

3 Comments

isherwood Over a year ago

Oddly, that's how it's specified in the docs. fontawesome.com/how-to-use/on-the-web/using-with/react

remoo Over a year ago

@isherwood Weird, I didn't check the docs, just glanced over his code. I wonder why they did that

engineerDave Over a year ago

IIRC fortawesome used to be their domain. Maybe before they got the big $ from the kickstarter

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

Collectives™ on Stack Overflow

How to use fontawesome in react?

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Related