How to use FontAwesome Icons in React App without using npm/yarn package?
Ali Hussain Dhuniya
Posted on August 11, 2020
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
💖 💪 🙅 🚩
Ali Hussain Dhuniya
Posted on August 11, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.