求助：使用Bootstrap 5 CDN时图标尺寸无法更改的问题

核心原因 #

你只引入了Bootstrap 5的核心CSS，但Bootstrap Icons是独立的资源库，必须单独引入其样式文件，否则bi-7x这类尺寸类不会生效。

解决步骤 #

1. 添加Bootstrap Icons的CDN样式链接
   在HTML的<head>标签内加入以下代码（放在Bootstrap核心CSS之后）：

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

2. 确认类名格式正确
   你的图标标签写法没问题，保持bi-图标名 bi-尺寸类的格式即可：

   <i class="bi-chevron-compact-down bi-7x"></i>
   

3. 备用方案：自定义CSS强制设置尺寸
   如果仍不生效，可直接通过CSS指定尺寸：

   .bi-chevron-compact-down {
       font-size: 7rem; /* 对应bi-7x的标准尺寸，1x=1rem */
   }
   

   将这段代码放在页面的<style>标签或外部样式文件中。

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
    <!-- Bootstrap 5核心CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <div class="banner-image w-100 vh-100 d-flex justify-content-center align-items-center">
        <div class="content text-center">
            <i class="bi-chevron-compact-down bi-7x"></i>
            <p class="little text-white">TUKLASIN&nbsp;&nbsp; ANG&nbsp;&nbsp; Hello</p>
        </div>
    </div>

    <!-- Bootstrap 5交互JS（可选） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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