DEV Community

Ali Dhuniya
Ali Dhuniya

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
For more clarity watch the video

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

Top comments (0)