某些 Bootstrap 5 图标未显示

Question

某些 Bootstrap 5 图标未显示

我遇到 Bootstrap 5 未显示某些图标的问题。双向搜索显示完美，但双向发送根本不出现。我通常会将其放入代码片段中，但该功能看起来不再可用，因此请耐心等待，因为我发布了复制此问题的 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sid*_*ali 19

您的 Bootstrap 图标导入适用于旧版本，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">

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

归档时间：	3 年，9 月前
查看次数：	27720 次
最近记录：	2 年，7 月前