Whenever I try to use a Font Awesome icon in React's render()
, it isn't displayed on the resulting web page although it works in normal HTML.
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Here is an live example: http://jsfiddle.net/pLWS3/
Where is the fault?
This question is related to
reactjs
font-awesome
Checkout react icons pretty dope and worked well.
npm install --save font-awesome
import 'font-awesome/css/font-awesome.min.css';
then
<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>
<span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>
as 'Praveen M P' said you can install font-awesome as a package. if you have yarn you can run:
yarn add font-awesome
If you don't have yarn do as Praveen said and do:
npm install --save font-awesome
this will add the package to your projects dependencies and install the package in your node_modules folder. in your App.js file add
import 'font-awesome/css/font-awesome.min.css'
You need to install the package first.
npm install --save react-fontawesome
OR
npm i --save @fortawesome/react-fontawesome
Don't forget to use className
instead of class
.
Later on you need to import them in the file where you wanna use them.
import 'font-awesome/css/font-awesome.min.css'
or
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
In my case I was following the documentation for react-fontawesome
package, but they aren't clear about how to call the icon when setting the icons into the library
this is was what I was doing:
App.js file
import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);
Component file
<FontAwesomeIcon icon={"coffee"} />
But I was getting this error
Then I added the alias when passing the icon prop like:
<FontAwesomeIcon icon={["fal", "coffee"]} />
And it is working, you can find the prefix value in the icon.js file, in my case was: faCoffee.js
Alexander's answer from above really helped me out!
I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts. This is what I ended up having to do:
$ npm i --save @fortawesome/fontawesome-free-brands
Then at the top of my footer component I included this:
import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';
My component then looked like this:
<a href='https://github.com/yourusernamehere'>
<FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>
Worked like a charm.
The simplest solution is:
Install:
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
Import:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
Use:
<FontAwesomeIcon icon={ faThumbsUp }/>
You can also use the react-fontawesome
icon library. Here's the link: react-fontawesome
From the NPM page, just install via npm:
npm install --save react-fontawesome
Require the module:
var FontAwesome = require('react-fontawesome');
And finally, use the <FontAwesome />
component and pass in attributes to specify icon and styling:
var MyComponent = React.createClass({
render: function () {
return (
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
);
}
});
Don't forget to add the font-awesome CSS to index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
I was experienced this case; I need the react/redux site that should be working perfectly in production.
but there was a 'strict mode'; Shouldn't lunch it with these commands.
yarn global add serve
serve -s build
Should working with only click the build/index.html file. When I used fontawesome with npm font-awesome, it was working in development mode but not working in the 'strict mode'.
Here is my solution:
public/css/font-awesome.min.css
public/fonts/font-awesome.eot
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***
in public/index.html
<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">
After all of above steps, the fontawesome works NICELY!!!
After struggling with this for a while I came up with this procedure (based on Font Awesome's documentation here):
As stated, you'll have to install fontawesome, react-fontawesome and fontawesome icons library:
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome
and then import everything to your React app:
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
Here comes the tricky part:
To change or add icons, you'll have to find the available icons in your node modules library, i.e.
<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons
Each icon has two relevant files: .js and .d.ts, and the file name indicates the import phrase (pretty obvious...), so adding angry, gem and check-mark icons looks like this:
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
To use the icons in your React js code, use:
<FontAwesomeIcon icon=icon_name/>
The icon name can be found in the relevant icon's .js file:
e.g. for faCheckCircle look inside faCheckCircle.js for 'iconName' variable:
...
var iconName = 'check-circle';
...
and the React code should look like this:
<FontAwesomeIcon icon=check-circle/>
Goodluck!
In case you are looking to include the font awesome library without having to do module imports and npm installs, put this in the head section of your React index.html page:
public/index.html (in head section)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
Then in your component (such as App.js) just use standard font awesome class convention. Just remember to use className instead of class:
<button className='btn'><i className='fa fa-home'></i></button>
npm install --save-dev @fortawesome/fontawesome-free
in index.js
import '@fortawesome/fontawesome-free/css/all.min.css';
then use icons like below :
import React, { Component } from "react";
class Like extends Component {
state = {};
render() {
return <i className="fas fa-heart"></i>;
}
}
export default Like;
If you are new to React JS and using create-react-app cli command to create the application, then run the following NPM command to include the latest version of font-awesome.
npm install --save font-awesome
import font-awesome to your index.js file. Just add below line to your index.js file
import '../node_modules/font-awesome/css/font-awesome.min.css';
or
import 'font-awesome/css/font-awesome.min.css';
Don't forget to use className as attribute
render: function() {
return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
https://github.com/FortAwesome/react-fontawesome
install fontawesome & react-fontawesome
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-svg-core
then in your component
import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>
<FontAwesomeIcon icon={faCoffee} />
</h1>
</div>
);
}
}
export default App;
Source: Stackoverflow.com