Angular项目安装bootstrap-icons后图标字体不生效配置咨询

仅执行npm i bootstrap-icons安装命令无法直接正常使用图标，也不需要在angular.json中额外单独配置图标字体文件的路径，只需要将bootstrap-icons的样式文件纳入Angular构建流程即可正常使用，两种配置方式选其一即可：

• 方式一：修改angular.json配置
  打开项目根目录下的angular.json，找到项目对应build配置节点下的styles数组，添加bootstrap-icons的样式文件路径，原有配置保留不要删除：

  "styles": [
    "src/styles.scss", // 项目原有全局样式配置
    "node_modules/bootstrap-icons/font/bootstrap-icons.css"
  ]
  

  修改angular.json后必须重启ng serve本地开发服务，该文件的改动不会触发热更新，不重启配置不会生效。

• 方式二：在全局样式文件中导入
  不想修改angular.json的话，可以直接打开项目的全局样式文件（通常为src/styles.css或src/styles.scss，和angular.json中styles数组引入的全局样式文件对应），添加一行导入语句：

  @import "bootstrap-icons/font/bootstrap-icons.css";
  

  保存后等待热更新，或重启开发服务即可生效。

注意：不需要手动拷贝字体文件到assets目录，也不需要额外在angular.json中配置字体文件的引用路径。bootstrap-icons的样式文件内已经写好了字体资源的相对引用规则，Angular构建时会自动将对应字体文件处理到打包输出目录，配置完成后直接在模板中使用<i class="bi bi-xxx"></i>语法即可渲染图标，也不需要再在index.html中引入CDN链接。

之前安装后无法加载图标，核心原因是npm安装仅将包下载到本地node_modules目录，没有把对应的样式、字体资源纳入Angular的构建打包链路，浏览器拿不到图标对应的样式规则和字体资源，自然无法正常渲染。

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