Bootstrap中添加的arrow-up-circle箭头图标无法显示该如何解决

Bootstrap 5.x版本的图标库属于独立资源，没有包含在核心的bootstrap.min.css文件中。你当前仅引入了Bootstrap核心样式，未引入图标库对应的样式文件，因此bi开头的图标类无法被识别，导致图标无法显示。

• 第一步：在页面<head>标签的现有Bootstrap核心样式引入代码下方，新增Bootstrap图标库的引入代码：

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

• 第二步：可以补充设置图标颜色，避免图标颜色和页脚深色背景重合导致看不见，你可以给<i>标签添加text-white类：

<i class="bi bi-arrow-up-circle text-white"></i>

<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">
      <!-- 新增Bootstrap图标库引入 -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/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 text-white"></i>
                </a>
            </div>
        </footer>
   </body>
</html>

内容的提问来源于stack exchange，提问作者Donn Deparsio