Font Awesome icon is not appearing in react application - reactjs

I Install all 3 required modules in react app.
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
I am trying to add font awesome icon in my program. But it is not showing up.Do I need to copy Font Awesome link and add in my app. That's what I used to do it in my html program.
(For example )
But in react how to do it? I tried the way which is in the document but it is not working. I only added the part of my program.Please help.
import React from 'react';
import { Form, Button} from 'react-bootstrap';
import './ContactUs.css';
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faShare} from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faShare)
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
// import { faShare } from '#fortawesome/free-solid-svg-icons'
class ContactUs extends React.Component{
render(){
return(
<div>
<Button className="btn send-button mt-4">
SUBMIT
<FontAwesomeIcon icon="share" />
</Button>
</div>
)
}
}
export default ContactUs;

I don't find any issue except one thing.
As you are using individual icon instead of, <FontAwesomeIcon icon="share" /> you must use write like this
<FontAwesomeIcon icon={faShare} />
Please check the below link for reference.
https://codesandbox.io/s/frosty-glade-9ful6?file=/src/App.js

Related

How do I use Font awesome Icon in React?

I want to use fontAwesome icons in ReactJs. I have not done this before. I want to do something like home Icons as well as Signout Icons in React.
Here is what I have done so far.
I included the font awesome Lib
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Now I want to use in the application Like so
<td width="150px">
<p align="center"/>
<button className="btn"><i className='icon-home'></i></button>
</td>
<td width="135">
<p align="center"/>
<button className="btnSignout"><i className='fa fa-home'></i></button>
</td>
How do I use FontAwesome in React Application?
To use Font Awesome in the react project, you should have to -
install the following packages (run the following commands in the terminal)
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Now it's time to call and use into the JavaScript file.
import into the file the following 2 lines.
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faMugHot } from '#fortawesome/free-solid-svg-icons';
The format of using icon is as follow,
<FontAwesomeIcon icon={faIconName, faAnotherIconName} />
for Example: `<FontAwesomeIcon icon={faAnchor, faMugHot} />
Note: icon name will be camelcase fa<IconName>. for example, in the font-awesome website font name is fa-anchor we can write it as faAnchor. for long name of the icon, if the name is fa-mug-hot we have to write it as faMugHot.
To use font awesome icons in easy way into your React project use react-icon library which not only provides support for font awesome but as well as provides for Bootstrap icons , Heroicons and more.
Step 1. npm install react-icons --save
step 2. Import a icon like this -
import { FaBeer } from 'react-icons/fa';
Note: FaBeer is icon name here for more icons visit to react-icons
Step 3. Use it something like this -
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
You can do this, check below code or click here for demo
Please double check the libraries I used and install
import React, { Component } from 'react';
import { render } from 'react-dom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee, faBars } from '#fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor() {
super();
}
render() {
return (
<div>
<p>Please check this</p>
<button className="btn btn-primary">
<FontAwesomeIcon icon={faBars} size={'1x'} />
<span style={{ marginLeft: '10px' }}> My Button</span>
</button>
<br />
<br />
<FontAwesomeIcon icon={faCoffee} size={'2x'} />
</div>
);
}
}
render(<App />, document.getElementById('root'));

Using font-awesome in React JS

I'm new to React JS and I'm trying to add font-awesome into my project. I have installed Node.js and npm. I have also included the following packages:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
Now, what should I do in index.js to be able to access all fonts and icons from these packages? I have checked multiple sources and information differs from site to site. Could you please explain how it's done and what should be written after "import" at the top of the file.
Also you can import all free font awesome icons with fas and fab prefixes in this way.
At first you need to install these packages.
npm i -S #fortawesome/fontawesome-svg-core #fortawesome/free-brands-svg-icons #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
And then add fas and fab prefixes from FA lib to your root file
import { library } from "#fortawesome/fontawesome-svg-core";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { fab } from "#fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
library.add(fas, fab);
const App = () => {
return (
<div>
<!-- Icon of fas prefix -->
<FontAwesomeIcon icon="home" />
<!-- Icon of fab prefix -->
<FontAwesomeIcon icon={['fab', 'google']} />
</div>
);
};
export default App;
First, make sure your package.json has font-awesome. If it does
not use npm i font-awesome to install it.
Second, You need to import the fonts that are in css folder of
font-awesome. Add the line to your index.js file.
import "../node_modules/font-awesome/css/font-awesome.min.css";
That information is inside the docs, here is the extract for 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)
https://github.com/FortAwesome/react-fontawesome#explicit-import
Just stop the node application, install babel-loader finally run npm start. That should solve your problem.
Great Source to the point.
https://www.digitalocean.com/community/tutorials/how-to-use-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"));

React App, Using Font Awesome brand icons in React VS Vue

I am trying to use the brand icons from Font Awesome, I have already used it before in a vue application, it's a little different from using the regular svg icons as the brands library is separate from the regular solid svg icons. this is how i used in a vue app.
// imports in the main.js file
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import { faFacebookF } from '#fortawesome/free-brands-svg-icons';
library.add(faCoffee, faFacebookF);
Vue.component('fa-icon', FontAwesomeIcon)
// usage in a vue component - regular svg icons
<fa-icon icon="coffee" />
// brand icon
<fa-icon class="ic right" :icon="['fab', 'facebook-f']" />
Now i am trying to do a similar thing in a react app, But I am a little stuck on where and how to import and use it, In Vue, I defined the <fa-icon /> globally in my main.js, but things are a little different with React. here is my attempt in a react component.
// imports in my app.js file
import React from 'react';
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebookF } from '#fortawesome/free-brands-svg-icons';
library.add(faCoffee, faFacebookF)
//this works
<FontAwesomeIcon icon="coffee" />
//this does not
<FontAwesomeIcon icon={"['fab', 'facebook-f']"} />
thanks in advance.
<FontAwesomeIcon icon={['fab', 'facebook-f']} />
https://www.npmjs.com/package/#fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
Install All Free Font Awesome Icons-- Using cmd on your project location:
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/react-fontawesome
npm i --save #fortawesome/free-brands-svg-icons
npm i --save #fortawesome/free-regular-svg-icons
Import this for Font Awesome:
import {FontAwesomeIcon} from "#fortawesome/react-fontawesome";
Add Font Awesome to your JSX:
<FontAwesomeIcon icon={faFacebookF}></FontAwesomeIcon>
<FontAwesomeIcon icon={faTwitter}/>
<FontAwesomeIcon icon={faGoogle}/>
And Lastly, import your brands-icon from your installed repository:
import {faFacebookF, faGoogle, faTwitter} from "#fortawesome/free-brands-svg-icons";

Cound not find icon react-fontawesome

I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
When I try to use it in my code like this:
<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>
I am getting this error on the console:
Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}
I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.
You need to add any icons you wish to use, to a "library" for easy reference.
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '#fortawesome/fontawesome'
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '#fortawesome/fontawesome-free-solid'
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
fontawesome.library.add(faCheckSquare, faCoffee);
const App = () => (
<div style={styles}>
<FontAwesomeIcon icon="check-square" /><br /><br />
<FontAwesomeIcon icon="coffee" />
</div>
);
render(<App />, document.getElementById('root'));
Check out working code here:
https://codesandbox.io/s/8y251kv448
Also, read this:
https://www.npmjs.com/package/#fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.
I had
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faUser } from "#fortawesome/free-solid-svg-icons";
library.add(faUser);
and
render() {
return (
<FontAwesomeIcon icon="faUser" />
);
}
when, in fact, the actual icon name is just "user", not "faUser":
render() {
return (
<FontAwesomeIcon icon="user" />
);
}
You can use FontAwesome icons without library like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
<FontAwesomeIcon icon={faCoffee} />
I've installed all the necessary packages as react-fontawesome says:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
And if you find yourself not seeing your icon when trying to display faTrashAlt (or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".
So, after loading the alternative trash can icon this way:
fontawesome.library.add(faTrashAlt);
It's then used that way:
<FontAwesomeIcon icon="trash-alt" />
Just so you don't waste 20 precious minutes of your time.
Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.
Example:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { faHistory } from '#fortawesome/pro-regular-svg-icons';
function exampleReactComponent() {
return (
<div>
<p><FontAwesomeIcon icon={faCoffee}/></p>
<p><FontAwesomeIcon icon={faHistory}/></p>
</div>
);
}
I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.
Explicit Import...
react-fontawesome npm package github link
Installing with npm...
installing fontawesome with npm link
To pass the icon path using an array like this
icon={['fa', 'coffee']}
You'll need to import all references of the library in a file and import this file in the index of your React app.
Example, create the file named fonts.js
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/pro-solid-svg-icons';
import { far } from '#fortawesome/pro-regular-svg-icons';
import { fal } from '#fortawesome/pro-light-svg-icons';
import { fad } from '#fortawesome/pro-duotone-svg-icons';
import { fab } from '#fortawesome/free-brands-svg-icons';
library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);
Now in the index.js of your app import the file that was created,
import '../configs/fonts.js'
This path is just an example, be sure that you are putting the right one.
For the free version of FontAwesome ;) #fortawesome
Install FontAwesome
npm install --save #fortawesome/react-fontawesome
npm install --save #fortawesome/fontawesome-free
npm install --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-regular-svg-icons
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/free-brands-svg-icons
Use it
...
import {FontAwesomeIcon} from '#fortawesome/react-fontawesome'
import '#fortawesome/fontawesome-free'
import {library} from '#fortawesome/fontawesome-svg-core'
import {far} from '#fortawesome/free-regular-svg-icons'
import {fas} from '#fortawesome/free-solid-svg-icons'
import {fab} from '#fortawesome/free-brands-svg-icons'
library.add(far,fas,fab);
...
<span className='fa fa-coffee'/>
<FontAwesomeIcon icon='coffee' />
<FontAwesomeIcon icon={['fas', 'coffee']}/>
<FontAwesomeIcon icon={['fab','react']}/>

Import react-mdl

Please help, I trying to import react-mdl to my project
import React from 'react';
import Icon from 'react-mdl/lib/Icon';
export default class Test extends React.Component {
render() {
return (
<div>
<Icon name="add" />
</div>
);
}
});
I get an error, I can not understand why
enter image description here
How fix this error?
Install react-mdl by using:
npm install --save react-mdl
Use this to import Icon:
import { Icon } from 'react-mdl';

Resources