loading...

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

alidhuniya profile image Ali Hussain Dhuniya ・1 min read

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

Discussion

pic
Editor guide