Bootstrap 5.3.2中Glyphicon图标不显示问题求助

问题原因 #

Bootstrap 5及后续版本已经完全移除了Glyphicons图标库，你之前使用的glyphicon glyphicon-minus类是旧版Bootstrap（3.x及更早）的图标语法，在Bootstrap 5里根本不生效，所以图标显示不出来。

正确解决方案：使用Bootstrap Icons（官方推荐） #

Bootstrap 5有配套的官方图标库Bootstrap Icons，用它来实现减号图标很简单：

1. 在HTML的<head>里引入Bootstrap Icons的CSS文件
2. 使用对应的图标类名替代旧的glyphicon类

以下是修改后的完整代码：

<head>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <!-- 引入Bootstrap Icons CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
</head>

<body>
  <!-- 使用Bootstrap Icons的大号减号图标，类名为bi bi-dash-lg -->
  <span class="bi bi-dash-lg" style="font-size:200px; color:blue; padding:20px;"></span>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

补充说明 #

• 若需要调整图标大小，除了自定义font-size，还可以用Bootstrap Icons自带的尺寸类，比如bi-2xl、bi-3xl等
• 不推荐额外引入Glyphicons资源，该库已被官方弃用，后续可能出现兼容性问题

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