Ionic 4中FontAwesome与<ion-icon>集成：name属性使用报错

我之前在Ionic 4项目里折腾FontAwesome的时候，正好碰到过和你一模一样的问题！当时也是能通过<i class="fas fa-alicorn"></i>或<ion-icon class="fas fa-alicorn"></ion-icon>正常显示，但想用原生ion-icon的name属性写法就报错icon was not resolved，折腾了好一会儿才搞定，给你分享下我亲测有效的解决步骤：

1. 确认依赖安装正确 #

首先确保你已经安装了FontAwesome和Angular适配的依赖（Ionic 4基于Angular），如果还没装，先执行：

npm install @fortawesome/fontawesome-free @fortawesome/angular-fontawesome

如果你用的是FontAwesome Pro版本，替换对应的包名即可（比如@fortawesome/pro-solid-svg-icons）。

2. 在App模块中导入FontAwesome资源 #

打开app.module.ts，导入FontAwesome的模块和你需要的图标库，把图标添加到全局library中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 导入FontAwesome相关模块
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
// 按需导入图标库，这里以solid、regular、brands为例
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

// 将图标库添加到全局library
library.add(fas, far, fab);

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    FontAwesomeModule // 加入FontAwesome模块
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 自定义Ionic图标解析规则 #

关键一步：让Ionic的图标注册表能识别fas fa-alicorn这种格式的名称。我们可以通过IconRegistry的自定义解析器来实现，打开app.component.ts：

import { Component } from '@angular/core';
import { IconRegistry } from '@ionic/angular';
import { DomSanitizer } from '@angular/platform-browser';
import { library } from '@fortawesome/fontawesome-svg-core';
import { IconDefinition } from '@fortawesome/fontawesome-common-types';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private iconRegistry: IconRegistry,
    private sanitizer: DomSanitizer
  ) {
    this.registerFontAwesomeIcons();
  }

  private registerFontAwesomeIcons() {
    // 注册自定义图标解析器
    this.iconRegistry.addCustomIconResolver((name: string) => {
      // 判断名称是否为FontAwesome格式（包含空格，比如"fas fa-alicorn"）
      if (name.includes(' ')) {
        const [prefix, iconName] = name.split(' ', 2);
        // 从全局library中查找对应图标
        const icon: IconDefinition | undefined = library.getIcon(`${prefix} ${iconName}`);
        
        if (icon) {
          // 生成符合要求的SVG字符串
          const svgString = `<svg class="${prefix} fa-${iconName}" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}">
            <path d="${icon.icon[4]}"></path>
          </svg>`;
          // 安全处理SVG内容并返回
          return this.sanitizer.bypassSecurityTrustHtml(svgString);
        }
      }
      // 如果不是FontAwesome格式，返回null让Ionic处理原生图标
      return null;
    });
  }
}

4. 导入FontAwesome全局样式 #

最后，在global.scss中导入FontAwesome的CSS样式，确保图标样式（大小、颜色等）正常生效：

@import '@fortawesome/fontawesome-free/css/all.min.css';

做完这些步骤后，你就可以像原生Ionic图标一样，直接用<ion-icon name="fas fa-alicorn"></ion-icon>的方式调用FontAwesome图标了，再也不会出现icon was not resolved的错误！

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