CODEWITHSUNDEEP
reactjs
Jacky
Jacky

Reputation: 895

How to add Font Awesome into React.js?

I was using react.js to build template website.

I started to build the second component header.js and i met a problem

I don't know how to link Font Awesome into react.js

How should i put this CDN to where?in app.js or in my header.js?

CDN:

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
 integrity="sha384- 
 50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
 crossorigin="anonymous">

Here is my app.js

 import React, { Component } from 'react';
 import Center from './Components/Center';
 import Header from './Components/Header';

 class App extends Component {
    render() {
      return (
       <div>
          <Header/>
          <Center/>
      </div>
    );
 }
 }

 export default App;

my Header.js:

 import React from 'react';
 import image from './images/0.png'

const Header = () =>{
return(
    <div>
    <nav className="navbar navbar-fixed-top">
        <div className="container-fluid">
            <div className="site-nav-wrapper">

                <div className="navbar-header">

                        <a class="navbar-brand smooth-scroll" href="#home">
                        <img src={image} alt="logo"/>
                    </a>
                </div>

                <div className="container">
                    <div className="collapse navbar-collapse">
                        <ul className="nav navbar-nav pull-right">
                            <li><a className="smooth-scroll" href="#01文字文字">01文字文字</a></li>
                            <li><a className="smooth-scroll" href="#02文字文字">02文字文字</a></li>
                            <li><a className="smooth-scroll" href="#03文字文字">03文字文字</a></li>
                            <li><a className="smooth-scroll" href="#04文字文字">04文字文字</a></li>
                            <li><a className="smooth-scroll" href="#Test文字文字">Test文字文字</a></li>
                            <li><a className="smooth-scroll" href="#回首頁"><i class="fas fa-home">回首頁</i></a></li>
                         </ul>
                    </div>
                </div>

            </div>
        </div>
    </nav>
    </div>
);
}

 export default Header

Upvotes: 3

Views: 6007

Answers (5)

LethuZikhali
LethuZikhali

Reputation: 1

You'll get every icon and everything you need here react-icons in short.

first install react-icons

  1. npm install react-icons --save
  2. How you use it:
import { FaBeer } from 'react-icons/fa';
   class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

Upvotes: 0

mfakhrusy
mfakhrusy

Reputation: 1198

I found this library react-fontawesome to be super helpful for importing fontawesome. See the usage section for more information.

You can simply import it like this

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

The naming is a bit different from the actual naming on fontawesome icon site, but it's similar so just change it from fa-coffee to faCoffee.

Upvotes: 5

Alexey Kutalo
Alexey Kutalo

Reputation: 241

Add following dependencies to your package.json:

"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-brands-svg-icons": "^5.8.1",
"@fortawesome/free-regular-svg-icons": "^5.8.1",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/react-fontawesome": "^0.1.4",

After npm install you can use icons in you component just like that:

import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
...
render() {
    return (
        ...
        <FontAwesomeIcon icon={faThumbsUp} />

Upvotes: 0

Dvid Silva
Dvid Silva

Reputation: 1162

Since you're using regular classes and not obfuscating and what not, it might be overkill to add an extra library,

You can add this on your index.html.ejs or something that is your root, or your header compoennt. And then include them or use them like in the docs. 

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
 integrity="sha384- 
 50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
 crossorigin="anonymous">

Upvotes: 0

Sumanth Madishetty
Sumanth Madishetty

Reputation: 3605

You can download the css files from this link and place the same in assets and import where ever required like

import 'assets/fontawesome.css' //Assuming the absolutepath and css file name as fontawesome

And If you want to use CDN in react then you need to create an html file and append the cdn in head of the same and render the react component in that HTML file

Upvotes: 0

Related Questions