xxxxxxxxxx
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)
xxxxxxxxxx
npm install --save font-awesome //install font awewsome
import 'font-awesome/css/font-awesome.min.css'; //import in react app
xxxxxxxxxx
React js or Next js
1- Installation:
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons
2- Add in head:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"></link>
Just check the latest version here:
https://cdnjs.com/libraries/font-awesome
3- Import:
// Import the FontAwesomeIcon component
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import the icons you need
import { faFacebook } from "@fortawesome/free-brands-svg-icons";
4- Add icon:
<FontAwesomeIcon icon={faFacebook} style={{ fontSize: 30, color: "white" }} className="text-center" />
xxxxxxxxxx
npm install --save font-awesome
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>;
}
xxxxxxxxxx
npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/free-solid-svg-icons
xxxxxxxxxx
npm i --save @fortawesome/fontawesome-svg-core
//Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/react-fontawesome@latest