I am facing an issue with bootstrap icons not working in ReactJS.
This is the code for my post items:
import React from 'react';
const PostListItem = () => {
return (
<li className="app-list-item d-flex justify-content-between">
<span className="app-list-item-label">
Hello World!!
</span>
<div className="d-flex justify-content-center align-items-center">
<button className="btn-star btn-sm">
<i className="f fa-star"></i>
</button>
<button className="btn-trash btn-sm">
<i className="f fa-trash-o"></i>
</button>
<i className="f fa-trash-heart"></i>
</div>
</li>
);
};
export default PostListItem;
In my index.html file, I have included links to Bootstrap CDN and Font Awesome CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4baa4b8">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78188899386908294888a82ca81958282a7d2c9d6d2c9d4">[email protected]</a>/css/fontawesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>