Can anyone give me an example of using font-awesome in React.js?
I have imported the react font-awesome. But the icon doesn't show on the browser. I can see the classname has been set on the dom but there is no CSS style associated with the dom.
Steps followed by me
1) npm install --save react-fontawesome
2) Inside my JS file :
import FontAwesome from 'react-fontawesome';
<FontAwesome name="rocket size="lg"" />
If you are using webpack with react.js what you need to do is to load the font with a loader, first install font-awesome and then
configure the loader in webpack.
{
test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
}
try it out and let me know.
Edit:
I forgot to mention that you should import font awesome CSS
import 'font-awesome/css/font-awesome.css'
then just reference like any other class like:
<span className="fa fa-facebook"></span>
Late to the party, but the easiest way is to use #fortawesome/react-fontawesome as mentioned on fontawesome website.
install the package with
yarn add #fortawesome/fontawesome-svg-core
yarn add #fortawesome/free-solid-svg-icons
yarn add #fortawesome/react-fontawesome
After that simply import the pack
import { faCog } from "#fortawesome/free-solid-svg-icons"
And use it
<FontAwesomeIcon icon={faCog} />
Related
Can I use Bootstrap in my React Js App? if yes, then how do i use? I would be great if you can help me out with some example.
Yes, you can install bootstrap by npm i bootstrap and import the css in App.js file like this import 'bootstrap/dist/css/bootstrap.cssbut you can also use react-bootstrap for the pre-created bootstrap component:
npm i react-bootstrap
Yes you can use bootstrap in react
npm install react-bootstrap bootstrap
or yarn add react-bootstrap bootstrap
import this in app.js
import 'bootstrap/dist/css/bootstrap.min.css';
I have installed react-bootstrap with:
npm install react-bootstrap bootstrap
command, and successfully imported it:
import Carousel from 'react-bootstrap/Carousel'
<Carousel>
...
</Carousel>
but it's styles didn't applied!
What I need to do to use it correctly?
React-Bootstrap doesn't come with bootstrap CSS automatically - it only produces the corresponding div elements with classes.
If you're using css modules, import the bootstrap css in index.js:
import "bootstrap/dist/css/bootstrap.min.css";
If you're using normal HTML, include bootstrap.min.css in your html file somehow.
I am learning React js by following a tutorial and creating react app via create-react-app with my terminal.
The problem is occuring with importing bootstrap to my code, I can't figure it out.
How I installed bootstrap is:
npm install bootstrap#4.1.3
App.js code and importing bootstrap :
import React, { Component } from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"
class App extends Component {
render() {
return (
<div className="App">
<h1 className="alert alert-warning">Welcome</h1>
</div>
);
}
}
export default App;
On compiling I get error:
Failed to compile.
./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/bootstrap/dist/css/bootstrap.css)
Module not found: Can't resolve 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx'
What I tried is: Installing different versions of bootstrap and importing them in my App.js file but same error occurs.
You need to configure loading CSS and other file types. This worked for me in the terminal:
yarn add babel-loader #babel/core --dev
You are installing the react-bootstrap library, add the CDN link in your HTML file, and import specific components as shown in the docs
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
React
import { Button } from 'react-bootstrap';
Silly Solution and I'm not sure why it worked but adding babel-loader and then removing it worked for me.
Add by running the below command
yarn add babel-loader #babel/core --dev
Then, remove using
yarn remove babel-loader #babel/core --dev
I had the same issue. For me the following worked:
deleting package-lock.json
run npm install
run npm start
yarn add/remove babel-loader #babel/core --dev works, not sure why?
packages, dependencies and lockfile all gets removed during yarn remove. As of now it works, so analyzing how, will be after learning React. ;)
I tried adding babel and removing it like in the answer above :
Add it using:
yarn add babel-loader #babel/core --dev
Remove it using:
yarn remove babel-loader #babel/core --dev
In case it didn't work, try importing bootstrap in the Index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
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!
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
The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:
https://scotch.io/tutorials/using-font-awesome-5-with-react
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));
Font Awesome now has an official React component that’s available to use their icons in your React applications.
Step 1 :
you must install 3 important packages in your project using a package manager like npm:
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Step 2 :
if you're planning on styling the icons you must download these two extra packages :
npm install --save #fortawesome/free-brands-svg-icons
npm install --save #fortawesome/free-regular-svg-icons
Step 3:
Once you’ve installed all the packages you need for your project, now you can use the icons.
Import this packages in your component like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
After that you can import an icon into your component like this (example
using an icon with the class as "fas fa-atom")
import { faAtom } from '#fortawesome/free-solid-svg-icons'
P.S : you can import multiple icons in one import with adding a coma between
each one.
Step 4 :
use the imported icons
const element = <FontAwesomeIcon icon={faAtom} />
SOURCE : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
This seems to work perfectly for React
Installation:
$ yarn add #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
Usage:
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)
Font Awesome 5 React
As #Alee pointed out Fontaweome fonts aren't included in the package. You will have to import it yourself.
Install npm font-awesome package. If you use npm run npm install font-awesome --save or if you use yarn then run yarn add font-awesome
Now you just have to import font-awesome.less under less directory by writing import 'font-awesome/less/font-awesome.less'
Now you should see your icons working :)
import fontawesome styles from the package itself without loading any external css:
import "#fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
See article to get more info
copy and paste in your html ...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
NEXT JS - Import styles this way if you are using NEXT jS
import '../node_modules/#fortawesome/fontawesome-svg-core/styles.css'
I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.
The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes.
Better to install everything all at once and then only import the icon you want,
npm i --save #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome #fortawesome/free-brands-svg-icons #fortawesome/free-regular-svg-icons
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSpinner } from '#fortawesome/free-solid-svg-icons';
make sure to import the icon from the exact pack, you can use ctrl + space to use the power of suggections to fiding icons and for changing pack when your importing icon.
Make sure that you have installed the Font Awesome package correctly
using a package manager like npm or yarn. You can install it by
running the following command in your project directory:
npm install --save #fortawesome/fontawesome-free
Check if you have imported the required font awesome files in your
project. Make sure to import the necessary stylesheets and the icons
library in your project files. You can do this by adding the
following code to your main index.js file:
import '#fortawesome/fontawesome-free/css/all.css';
import { library }from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
import { fas } from'#fortawesome/free-solid-svg-icons';
Ensure that the icon name and style properties are set correctly.
You can use the FontAwesomeIcon component from the
#fortawesome/react-fontawesome package to display icons in your
project. For example, you can display a faUser icon with a solid
style using the following code:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faUser } from '#fortawesome/free-solid-svg-icons';
<FontAwesomeIcon icon={faUser} style={{color: 'black'}} />
If the above steps do not work, try clearing your browser cache and
restarting your development server.
If the issue persists, you may want to check the Font Awesome
documentation and GitHub repository for additional help and support
.
Try adding
<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>
to your main index.html within your react project.
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?
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>;
}
React uses the className attribute, like the DOM.
If you use the development build, and look at the console, there's a warning. You can see this on the jsfiddle.
Warning: Unknown DOM property class. Did you mean className?
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;
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;
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">
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 }/>
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>
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>
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'
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!
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'
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.
Personally, I found react-fontawesome to be unwieldy because of the way it requires each icon to be individually imported. If you would like to use Font Awesome version 5 with React without using react-fontawsome, you can do it as follows:
Download the fontawesome free package from font awesome themselves here: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Create a directory 'fontawesome' in the 'public' directory of your react app.
Copy the 'css' and 'webfonts' directories from the downloaded zip into this folder.
Add the following line to the 'head' tag of your 'index.html' file:
<link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet">
You can now use Font Awesome icons in the usual way:
<i className="fas fa-globe-europe"></i>
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!!!
If someone wants to do it via the Official documentation. Here is how I did and what I understood.
Install the library as mentioned on font awesome page using npm or yarn for example in general I used these
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
You need two import library from '#fortawesome/fontawesome-svg-core' if you want to use in general or globally, it provides the access to the icons everywhere in your project.
import { library } from '#fortawesome/fontawesome-svg-core';
To use the icons you need to import them based on the npm or yarn library you have installed. I would recommend importing this in App.js where it will be easily visible. Like If I was using a free-tier shopping cart icon and it was solid you can import like below (if you are not sure if its solid, regular, etc or what library just click on the icon it will list out the different versions and based on the icon you like you can import the library for react).
import { faShoppingCart } from '#fortawesome/free-solid-svg-icons';
for adding the icon name I would recommend writing the import statement and library and then precede with fa and start typing the name it will auto-recommend as soon as you type (checked in VSCode) which will make it less complicated to find.
You need to add the icons in the library for making it accessible globally in your project separated by a comma
library.add( faCheckSquare, faAmbulance, faShoppingCart);
After which you can import the following component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
and use it like below wherever you need the icon. For the name, it's the same as listed on the style class on the FontAwesome site, for the icons. eg: shopping cart is listed as shopping-cart
<FontAwesomeIcon icon="shopping-cart" />
It should work now after this.
Checkout react icons pretty dope and worked well.
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
For Font Awesome v6.x.x
Fontawesome provides three ways to use its icons.
After considering ease of usage and bundle size. The below method looks best.
yarn add #fortawesome/fontawesome-svg-core
# free icons styles
yarn add #fortawesome/free-solid-svg-icons
yarn add #fortawesome/free-regular-svg-icons
yarn add #fortawesome/react-fontawesome#latest
import icons that you want.
import { faClipboard } from "#fortawesome/free-solid-svg-icons";
import { faClipboard as farClipboard } from "#fortawesome/free-regular-svg-icons";
Note: if you need a Solid icon you need to import it from #fortawesome/free-solid-svg-icons and if you need a Regular icon you need to import it from #fortawesome/free-regular-svg-icons
Prefix regular icons with far instead of fa as a convention
Usage:
<p>
This is a free Solid Icon <FontAwesomeIcon icon={faClipboard} />
</p>
<p>
This is a free Regular Icon <FontAwesomeIcon icon={farClipboard} />
</p>
Note:
As you search for icons in Fontawesome documentation and copy the code you will get something as below. However, you need to change the icon prop to the above-mentioned value for the icon to display.
<FontAwesomeIcon icon="fa-solid fa-clipboard" />
Here is the CodeSandbox for the above-mentioned snippets.
Refer to official Docs for more info.
PS: You can only use Free Solid, and Free Regular icons under the free plan.
Here is the list of icons that are available under free plan.