解决 Angular5 构建后 font awesome 图标显示问题-JavaScript中文网-JavaScript教程资源分享门户

问题背景

在使用 Angular5 进行前端开发的过程中，可能会涉及到使用 font awesome 图标库来渲染页面。在开发阶段使用这些图标并不会有什么问题，但是一旦将 Angular5 项目构建打包成生产环境进行发布，就会出现 font awesome 图标无法显示的问题。

这是因为，在项目构建过程中，Angular5 会将 css 文件进行压缩和混淆，而 font awesome 图标的 css 文件中包含的字体文件路径可能会被修改，导致字体文件无法正确加载，最终导致图标无法显示。

解决方案

下面介绍两种解决方案。

方案一：手动修改 css 文件

我们可以手动修改 font awesome 的 css 文件，将字体文件的路径修改为相对路径。

比如，将原来的代码：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

修改为：

@font-face {
  font-family: 'FontAwesome';
  src: url('./../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('./../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('./../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('./../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('./../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('./../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

这样，字体文件的路径就会变成相对路径，不受项目构建后文件路径的影响。

方案二：使用 font-awesome-angular

另一种解决方案是使用 font-awesome-angular 库。这是一个 Angular5 的 Font Awesome 组件，可以直接在 Angular5 中使用 Font Awesome 图标，而不需要手动引入 css 文件。

使用方法如下：

安装 font-awesome-angular：

npm install --save @fortawesome/angular-fontawesome@0.7.0

安装 Font Awesome：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons

在 app.module.ts 文件中引入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons';

library.add(faCoffee, faCheckSquare, faSquare); // 引入需要的图标

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在页面中使用：

<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

到这里你已经可以在使用中更新 Font Awesome 加入图标了！

总结

使用 font awesome 图标时可能会出现无法显示的问题。手动修改 css 文件中字体文件的路径为相对路径或使用 font-awesome-angular 库都是解决这个问题的好方法。希望这篇文章对大家能有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65aa254dadd4f0e0ff3b49b4