一些Bootstrap 5图标未显示出来。

Question

一些Bootstrap 5图标未显示出来。

10

我遇到了Bootstrap 5显示某些图标不完整的问题。bi-search显示得很好，但bi-send根本不出现。通常我会把这个放在代码片段中，但是这个功能似乎不再可用了，所以请耐心等待，我将发布复制此问题的HTML。

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
                    <!-- This code shows the search icon fine, but send and many others do not work-->
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="bi bi-send"></i><i class="bi bi-search"></i></span>
                    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>

- rockets4all

4个回答

1

你需要将bootstrap-icons.min.css添加到

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>

然后，您可以无缝地使用这两种方式（将 Bootstrap 图标下载到您的项目中并在其中使用）

<i class="bi bi-facebook"></i>
<img alt="Bootstrap" src="bootstrap-icons-1.10.5/graph-up.svg">

做得好！

- Mehmet Ability

0

您可以添加以下内容 -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

- Phalak

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步细节，比如引用或文档，以便其他人可以确认你的回答是正确的。你可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

0

我正在尝试在NextJS中使用图标，遇到了同样的问题。它们不显示。这就是为什么我使用SVG作为图标，这样可以每次都正常工作。

- Deyan p

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Siddharth Bhansali · Accepted Answer

你的 Bootstrap Icons 导入是旧版本，那个版本中不存在 send 图标。

请使用最新版本 1.8.1（截至2022年3月26日）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

版本 1.10.5 更新（截至2023年5月10日）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

您可以在这里找到最新版本。