Ali Hussain Dhuniya

Posted on Aug 11, 2020

How to use FontAwesome Icons in React App without using npm/yarn package?

#react #javascript #fontawesomeicons #icons

In case you are looking to include the font awesome library without having to do module imports and npm installs then put the SDK in public html head section like this :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <script
    src="https://kit.fontawesome.com/fc31dedf63.js"
    crossorigin="anonymous"
  ></script>

And use fontawesome class as you do without react but instead of class = "fa fa-home", write className = "fa fa-home"
Example:

<div className = "sidebar__menus">
<a className = " fa fa-home"  href = "#">
{view && view.menuheadings.fields.home}</a>
</div>

For more clarity watch the video

Stack overflow link: https://stackoverflow.com/questions/23116591/how-to-include-a-font-awesome-icon-in-reacts-render

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Top comments (0)

Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts

Dera Okeke - Dec 28 '24

Building a Classic Space Invaders Game with HTML CSS Canvas and JavaScript

sharathchandark - Dec 28 '24

Build Your Own Classic Brick Breaker Game Using HTML, CSS, Canvas, and JavaScript

sharathchandark - Dec 27 '24

🎯Starting My 100-Day Coding Challenge with Express.js

Sahil khatiwada - Dec 16 '24

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

DEV Community