Angular项目中Glyphicon图标不显示问题求助

原因分析 #

• Bootstrap 4及更高版本已移除内置的Glyphicon图标库，如果安装的是Bootstrap 4+，自然无法加载这类图标
• 即便使用Bootstrap 3，也需确保字体文件被正确引入项目，否则图标无法渲染

解决方案 #

方案1：降级到Bootstrap 3（需保留Glyphicon时用） #

1. 卸载当前Bootstrap版本：

   npm uninstall bootstrap --save
   

2. 安装Bootstrap 3.x稳定版（例：3.4.1）：

   npm install bootstrap@3.4.1 --save
   

3. 确认styles.css中的引入路径正确：

   @import "~bootstrap/dist/css/bootstrap.css";
   

4. 若仍不显示，手动在angular.json的assets数组中添加字体资源路径：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     {
       "glob": "**/*",
       "input": "./node_modules/bootstrap/dist/fonts",
       "output": "./fonts/"
     }
   ]
   

方案2：改用第三方图标库（推荐） #

Bootstrap 4+官方不再维护Glyphicon，推荐使用Font Awesome这类主流图标库：

1. 安装Font Awesome：

   npm install @fortawesome/fontawesome-free --save
   

2. 在styles.css中引入样式：

   @import "~@fortawesome/fontawesome-free/css/all.css";
   

3. 替换原有Glyphicon代码，比如将<span class="glyphicon glyphicon-star"></span>改为：

   <span class="fas fa-star"></span>
   

验证操作 #

修改完成后重启Angular开发服务器：

ng serve

刷新页面即可查看图标是否正常显示。

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