为什么 Bootstrap 图标在 ReactJS 中不起作用？答案

【问题标题】：Why Bootstrap icons does not work in ReactJS?为什么 Bootstrap 图标在 ReactJS 中不起作用？
【发布时间】：2021-09-26 13:01:14
【问题描述】：

我不知道为什么引导图标在 ReactJS 中不起作用。

Here is my buttons

我的帖子代码：

从“反应”导入反应；

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>

【问题讨论】：

这与 React 或 Bootstrap 无关，因此请从等式中删除两者：如果您将 <i....> 放在 HTML 文件中会发生什么。除了 fontawesome CSS 之外，没有应用程序，没有加载任何东西。简单的 HTML 文件，加载了开发工具，打开查看是否有错误。请记住完成minimal reproducible example 练习：它可以让您专注于您的问题并准确找出问题所在。几乎总是，一旦您的代码尽可能少，您最终会发现如何修复它，但在极少数情况下您不知道，您可以将完美的代码放入帖子中。
最好的方法是在你的 react 应用中使用 material-ui 图标。它简单而有吸引力

标签： javascript html css reactjs react-redux

【解决方案1】：

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">

【讨论】：

【解决方案2】：

老实说，我无法直接回答您关于“为什么”的问题。但如果你只是想让它工作，我可以推荐 npm-package “react-icons”。在这里，您可以直接访问许多图标集，例如 Bootstrap 图标或 Font Awesome。

React Icons page

【讨论】：

【解决方案3】：

您只需根据图标所属的类别将f 更改为fas 或fab。

您可以通过https://fontawesome.com/v5/cheatsheet/free/查看它们

和

我认为没有名称为 fa-trash-o 和 fa-trash-heart 的字体很棒的图标

【讨论】：