Angular6升级@fortawesome/angular-fontawesome后Unicode伪元素图标不显示

核心结论 #

你当前安装的@fortawesome/angular-fontawesome是基于SVG内核实现的组件库，默认不会自动注入Web Font字体文件与配套CSS，因此使用CSS伪元素+Unicode的写法必须额外引入对应Web Font资源，否则无法正常渲染图标。 #

现有写法的错误点 #

先修正你当前代码里几个直接导致显示失败的问题：

• Unicode编码写错：FA5所有图标Unicode均为4位十六进制值，你写的\f01缺了一位属于无效编码，原有FA4的\f138对应图标在FA5中的编码需要核对官方图标库确认，不要随意修改编码值。
• 缺少必要的字重声明：FA5 Free的实心（Solid）图标必须指定font-weight: 900，常规（Regular）图标对应字重为400，缺省字重下字体匹配不到对应字形会显示空白。
• 选择器拼写错误：无序列表标签是ul不是ui。
• 资源缺失：你当前安装的三个依赖包（@fortawesome/angular-fontawesome/fontawesome-svg-core/free-solid-svg-icons）均为SVG组件方案的依赖，不包含Web Font版本的CSS和字体文件，就算想从node_modules引入也没有对应资源。

可选解决方案 #

方案1：保留伪元素写法（改动量最小，适配现有大量旧代码） #

适合不想批量修改CSS、快速修复问题的场景：

1. 安装对应版本的FA5 Web Font包，版本和你现有图标包对齐为5.15.4避免兼容问题：

   npm install @fortawesome/fontawesome-free@5.15.4 --save
   

2. 打开angular.json，找到项目构建配置下的styles数组，添加Web Font的CSS引入：

   "styles": [
     "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
     "src/styles.scss"
   ]
   

3. 修正CSS伪元素代码，以实心图标为例：

   ul li:before {
     content: '\f138'; /* 替换为目标图标对应的正确FA5 Unicode值 */
     font-family: "Font Awesome 5 Free";
     font-weight: 900; /* 实心图标必填，品牌图标填400、font-family改为"Font Awesome 5 Brands" */
     display: inline-block;
     /* 按需添加间距、字号等样式 */
   }
   

方案2：全量切换为SVG组件方案（长期维护推荐） #

该方案不需要加载额外字体文件，打包体积更小、不会出现字体加载闪烁问题：

• 优先把所有伪元素渲染的图标改为模板内直接使用<fa-icon>组件，删除对应CSS伪元素代码，和你之前替换<i>标签的逻辑保持一致，实现全项目写法统一。
• 注意你安装的Angular FontAwesome版本存在命令与实际安装版本不匹配的问题：@fortawesome/angular-fontawesome@3.0.0仅支持Angular 11+，适配Angular 6的正确版本是你已安装的^0.3.0，不要执行错误版本的安装命令否则会出现编译报错。

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