我看不到我在引导程序中添加的箭头图标答案

【问题标题】：I can't see my arrow icon that i added in bootstrap我看不到我在引导程序中添加的箭头图标
【发布时间】：2021-09-29 04:08:41
【问题描述】：

我想将这个向上箭头的圆圈图标添加到我的页脚，但是当我添加它时我看不到它，这是我的 html 代码：

    <html>
       <head>
          <link 
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
       </head>
       <body>
            <!-- Footer -->
            <footer class="p-5 bg-dark text-white text-center position-relative">
                <div class="container">
                    <p class="lead">Copyright &copy; 2021 GhDesign isLazy</p>
                    <a href="#" class="position-absolute bottom-0 end-0 p-5">
                        <i class="bi bi-arrow-up-circle "></i>
                    </a>
                </div>
            </footer>
       </body>
    </html>

【问题讨论】：

添加正确的库：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">.

标签： html css bootstrap-4 bootstrap-5

【解决方案1】：

只要确保包含图标库：

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<i class="bi bi-arrow-up-circle"></i>

【讨论】：

【解决方案2】：

您还需要加载图标字体才能使用引导程序的图标：

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

<html>

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


  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

<body>
  <!-- Footer -->
  <footer class="p-5 bg-dark text-white text-center position-relative">
    <div class="container">
      <p class="lead">Copyright &copy; 2021 GhDesign isLazy</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-5">
        <i class="bi bi-arrow-up-circle "></i>
      </a>
    </div>
  </footer>
</body>

</html>

或者如果您不想加载整个字体，只需使用 SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
</svg>

【讨论】：

【解决方案3】：

您没有导入好的 CDN，您需要如下代码所示的引导图标：

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>

<body>
  <!-- Footer -->
  <footer class="p-5 bg-dark text-white text-center position-relative">
    <div class="container">
      <p class="lead">Copyright &copy; 2021 GhDesign isLazy</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-5">
        <i class="bi bi-arrow-up-circle "></i>
      </a>
    </div>
  </footer>
</body>

</html>

【讨论】：

谢谢大家，所以问题是我没有导入图标库。
我会马上接受你的回答