Create Stunning Interfaces with Font Awesome in React (Step-by-Step)

Font Awesome is a library that displays information and messages in symbolic format. We can add an excellent font library and show fonts or symbols in various ways. In React JS, there are two methods to use font awesome.

Using an online link with html page
Using react.js installation

Table of Contents

Using an Online Link with HTML Page

The html page works with the form, element, tags and fonts with links. We can use React’s online link with the font excellent online link.

How to Use Font Awesome

The following steps are used to add font awesome in React.js.

Step 1:

Create an HTML page with the react JS online links in the head section.

<!DOCTYPE html>
<html>
<head>
<script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>
<script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>
<script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>
</head>
</html>

Step 2:

Use Font Awesome’s online link with the required version in the head section.

<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Step 3:

Create a reacts class and show the output element. Use font awsomes link with the <i></i> tags and their size.

Class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <div>
Hello Student <br/>
<i class = “fa fa-lg fa-address-book” aria-hidden = “true”></i>
}
}

Step 4:

Shows the output of the font awesome in the container.

root.render(<HelloMessage id=”Javatpoint” name=” website” />);

Examples:

The following examples show the font is awesome with different styles and UI.

Example 1:

The following examples show the font awesome with basic symbols in the html page.

<!DOCTYPE html>
<html>
<head>
<script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>
<script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>
<script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = “demo1”>
<b> React Getting Started with id and name </b>
<div id = “mydiv”></div>
</div>
<script type = “text/babel”>
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <div>
Hello Student <br/>
<i class = “fa fa-address-book” aria-hidden = “true”></i>
Id: {this.props.id} <br/><br/>
<i class = “fa fa-address-card” aria-hidden = “true”></i>
name:{this.props.name}
</div>;
}
}
//create react root to show the message
const container = document.getElementById(‘mydiv’);
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id=”Javatpoint” name=” website” />);
</script>
</body>
</html>

Output:

The image shows the font’s awesome symbols on the web page.

Example 2:

The following examples show the font awesome with basic symbols in the html page. We can use font awesome with the form tag.

<!DOCTYPE html>
<html>
<head>
<script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>
<script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>
<script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = “demo1”>
<b> User Form Using React Js </b>
<div id = “mydiv”></div>
</div>
<script type = “text/babel”>
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <form>
<br/>
<b> Welcome User </b> <br/> <br/>
<i class = “fa fa-user-circle” aria-hidden = “true”></i>
User Name: <input type= ‘text’/><br/><br/>
<i class = “fa fa-envelope” aria-hidden = “true”></i>
User Name: <input type= ’email’/><br/><br/>
<input type= ‘submit’/><br/>
</form>;
}
}
//create react root to show the message
const container = document.getElementById(‘mydiv’);
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id=”Javatpoint” name=” website” />);
</script>
</body>
</html>

Output:

The image shows the font’s awesome symbols on the web page.

Example 3:

The following examples show the font awesome with basic symbols in the html page. We can use font awesome with sizes in the table.

<!DOCTYPE html>
<html>
<head>
<script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>
<script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>
<script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>
<script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = “demo1”>
<b> User Form Using React Js </b>
<div id = “mydiv”></div>
</div>
<script type = “text/babel”>
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <table>
<tr>
<th> Sr No </th>
<th> Name </th>
<th> Symbol </th>
</tr>
<tr>
<td> 1 </td>
<td> Home </td>
<td> <i class = “fa fa-sm fa-home” aria-hidden = “true”></i> </td>
</tr>
<tr>
<td> 2 </td>
<td> Email </td>
<td> <i class = “fa fa-md fa-envelope” aria-hidden = “true”></i>
</td>
</tr>
<tr>
<td> 3 </td>
<td> User </td>
<td> <i class = “fa fa-lg fa-user-circle” aria-hidden = “true”></i>
</td>
</tr>
</table>
}
}
//Create react root to show the message
const container = document.getElementById(‘mydiv’);
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id=”Javatpoint” name=” website” />);
</script>
</body>
</html>

Output:

The image shows the font’s awesome symbols on the web page.

Using React.JS Installation

React.js needs to install the font awesome library with the node js package. We need to install the node js package locally and set up the requirement of the react with font awesome. Create a React app and import a file with the symbol package.

How to Use Font Awesome in React.JS

The following steps are used to work with Font Awesome.

Step1: Using font awesome

The font awesome creates React Js components to operate simultaneously. We can import fontawesome icons and required icon packages.

import React from “react”;
import { render } from “react-dom”;

Step2: Choosing Icon

We can choose the required icon and import it with the package. Create an awesome library and use it in React JS.

When we know the package and the font, then keep in mind the three-letter abbreviation for that package:

Solid Font Style – fas
Regular Font Style – far
Light Font Style – fal
Duotone Font Style – fad

Step 3: Installing Font Awesome library in React JS.

The library or package can be imported through React to support required fonts.

import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;

Step 4: create or import font library and import it.

import { faHome } from “@fortawesome/free-solid-svg-icons”;

Step 5: Use the required icons in the tags.

We can use font style in the following ways and display fonts of the information.

<FontAwesomeIcon icon = {faCode} />
Or
<FontAwesomeIcon icon = {[‘fas’, ‘code’]} />
Or
<FontAwesomeIcon icon = {[‘fall, ‘code’]} />

Examples

The following examples show the font awesome with different styles and sizes. We can use react for different types of symbolic fonts and messages.

Example 1:

The following examples show the font awesome with basic symbols and information. Using the import package, we can use two font awesome simultaneously in React JS.

import React from “react”;
import { render } from “react-dom”;
import “./styles.css”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import { faHome } from “@fortawesome/free-solid-svg-icons”;
export default function App() {
return (
<div className = “App”>
<div>
<br/> <br/>
<FontAwesomeIcon icon = {faHome } />
Welcome To javatpoint Home
</div>
</div>
);
}

Output:

The image shows the font’s awesome symbols on the web page.

Example 2:

The following examples show the font awesome with basic symbols and information. Using the import package, we can use two font awesome simultaneously in React JS.

import React from “react”;
import { render } from “react-dom”;
import “./styles.css”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import { faMugHot, faHome } from “@fortawesome/free-solid-svg-icons”;
export default function App() {
return (
<div className = “App”>
<div>
<FontAwesomeIcon icon = {faMugHot} />
Welcome To React Js!
<br/> <br/>
<FontAwesomeIcon icon = {faHome } />
The javatpoint Home
</div>
</div>
);
}

Output:

The image shows the font’s awesome symbols on the web page.

Example 3:

The following examples show the font awesome with basic symbols and information. We can use the different sizes 2 or 3 times bigger than normal.

import React from “react”;
import { render } from “react-dom”;
import “./styles.css”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import { faMugHot, faHome } from “@fortawesome/free-solid-svg-icons”;
export default function App() {
return (
<div className = “App”>
<div>
<FontAwesomeIcon icon = {faMugHot} size = {“3x”} />
Coffee Please!!
<br/> <br/>
<FontAwesomeIcon icon = {faHome } size = {“2x”} />
Welcome To React Js! The javatpoint Home!
</div>
</div>
);
}

Output:

The image shows the font’s awesome symbols on the web page.

Conclusion

The font Awesome is an essential function to create attractive functions. It symbolically defines function names using React.

Create Stunning Interfaces with Font Awesome in React (Step-by-Step)