Menu
I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md
import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
render() {
return (
<div>
<div>
<span>
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
SOME TEXT
</span>
</div>
...
</div>
)
}
}
But I'm not seeing an icon in the DOM. Although I do see in the Chrome Dev Tools:
<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>
which I feel like should be a <i> tag. I tried changing the <span>...</span> to an <i>...</i> in "edit as HTML" in the dev tools and the icon still didn't show.
I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.
Can anyone tell me if I'm missing something? Do I need some other package other than react-fontawesome to make this work? Do I need to import the standard font-awesome.css or load a font-awesome CDN? Any help would be greatly appreciated, thanks!
949
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
To solve the error "Module not found: Error: Can't resolve 'react-icons'", make sure to install the react-icons package by opening your terminal in your project's root directory and running the command npm install react-icons and restart your dev server.
I had the same problem. Read their Readme.md, and you see that there is this note:
Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.
So the most simple way is to link to the fontawesome cdn in your html.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
Run npm install font-awesome --save
In your index.js or App.js or YourComponent.js, import the minified CSS file.
import 'font-awesome/css/font-awesome.min.css';
As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here:
https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html
You can see that the developer has included the font-awesome CSS on line #5.
On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here: https://www.npmjs.com/package/@fortawesome/react-fontawesome
To use v5:
Install dependencies:
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
Your component can then use icons like so:
import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'
const element = (
<FontAwesomeIcon icon={faCoffee} />
)
ReactDOM.render(element, document.body);
You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448
More details about the library function available here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
