我不知道为什么引导程序图标在ReactJS中不起作用。
这是我的按钮
我的帖子项目代码：
从"React"导入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;
我的index.hmtl在哪里放了一个链接https://www.bootstrapcdn.com/和https://www.bootstrapcdn.com/fontawesome/
<!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/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/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 the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Bootstrap上一个版本在我的最新项目中不起作用。我更改了Bootstrap版本，它解决了我的问题。你能在你的index.html 中尝试一下吗
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
而不是这个
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
说实话，我不能直接回答你的问题"为什么"；。但如果你只是想让它发挥作用，我可以推荐npm包"反应图标"；。在这里，您可以直接访问许多图标集，如Bootstrap图标或Font Awesome。
反应图标页面
您所需要做的就是根据图标所属的类别将f更改为fas或fab。
您可以在查看https://fontawesome.com/v5/cheatsheet/free/
和
我不认为有任何字体很棒的图标名为fa-trash-o和fa-trash-heart