Angular14+Bootstrap5下拉菜单图标显示异常问题求助

问题概述 #

基于Angular 14 + Bootstrap 5实现的下拉菜单，展开折叠功能正常，但下拉按钮的自定义Feather图标显示异常（表现为方块/乱码占位符）。

相关代码片段 #

下拉菜单HTML结构

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

index.html资源引入

<link rel="stylesheet" href="/assets/css/libs.bundle.css" />
<!-- Theme CSS -->
<link rel="stylesheet" href="/assets/css/theme.bundle.css" />

<!-- JAVASCRIPT -->

<!-- Vendor JS -->
<script src="/assets/js/vendor.bundle.js"></script>
<!-- Theme JS -->
<script src="/assets/js/theme.bundle.js"></script>

自定义下拉图标CSS

.dropdown-toggle:after {
  border: none!important;
  content: "\e92e";
  font-family: Feather;
  height: auto;
  line-height: 1;
  vertical-align: middle;
  width: auto;
}

排查与解决步骤 #

1. 确认Feather字体文件加载状态

   • 打开浏览器开发者工具「网络」面板，搜索Feather相关字体文件（.woff/.woff2/.ttf等），检查是否返回200状态码，路径是否与实际文件位置匹配。
   • 核对主题CSS中的@font-face规则，确保src指向正确路径：

     @font-face {
       font-family: 'Feather';
       src: url('/assets/fonts/feather.woff2') format('woff2'),
            url('/assets/fonts/feather.woff') format('woff');
       font-weight: normal;
       font-style: normal;
     }
     

2. 验证Unicode编码与字体匹配度

   • 确认\e92e是否为Feather字体中对应下拉图标的正确编码，可通过字体预览工具或官方字符映射表核对，必要时替换为官方标准编码（如\e939，以实际字体包为准）。

3. 排查CSS样式优先级冲突

   • 用开发者工具查看.dropdown-toggle:after的生效样式，确认font-family: Feather是否被Bootstrap默认样式或其他CSS覆盖。可提升样式优先级：

     .btn.dropdown-toggle:after {
       border: none!important;
       content: "\e92e";
       font-family: 'Feather'!important;
       height: auto;
       line-height: 1;
       vertical-align: middle;
       width: auto;
     }
     

4. 检查Angular资源打包配置

   • 确保字体文件被纳入Angular打包流程，在angular.json的assets数组中添加字体路径：

     "assets": [
       "src/favicon.ico",
       "src/assets",
       "src/assets/fonts"
     ]
     

5. 回退测试定位问题

   • 注释掉自定义的.dropdown-toggle:after样式，恢复Bootstrap默认下拉箭头。若默认箭头显示正常，可确认问题出在自定义字体配置环节。

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