3

关于这个主题的现有问题是指如何将 Angular 与 FontAwesome 图标一起使用，理想的答案是Angular FontAwesome。我搜索了两个 repo 并没有真正找到使用 angular-fontawesome 的东西。只有旧解决方案的提示。

所以我有那个。我也在使用 Angular Material Buttons，我的任务是在我的按钮中使用 FontAwesome 图标，这导致我使用Material Icons

我不确定从哪里开始。

前提是我已经按照描述向 angular-fontawesome 添加了一个图标。我有一个带有图标的按钮准备好了，有一个标准的方法可以用来连接两者吗？

TLDR：我想使用 a Material Icon Button，但我无法使用 aMaterial Icon并且必须FontAwesome Icons改用。我不知道如何实现这一点。

4

2 回答 2

3

方法一：材质图标注册

Material 允许使用自定义 SVG 图标及其组件（如mat-button）。FontAwesome 图标也是 SVG，因此您可以使用此机制来解决手头的任务。

// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';
import { icon } from '@fortawesome/fontawesome-svg-core';

// 4. Use with `mat-icon` component in your template
@Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
  constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
    // 2. Render icon into SVG string
    const svg = icon(faFontAwesomeFlag).html.join('');
    // 3. Register custom SVG icon in `MatIconRegistry`
    registry.addSvgIconLiteral(
      'font-awesome', 
      sanitizer.bypassSecurityTrustHtml(svg)
    );
  }
}

另请检查此问题以获取更轻量级实现的描述。

方法 2：使用 angular-fontawesome 库中的 fa-icon 组件

由于您似乎已经@fortawesome/angular-fontawesome在应用程序中使用了 package，因此您可以避免mat-icon完全使用并使用fa-iconinside mat-button。

import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';

@Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
  faFontAwesomeFlag = faFontAwesomeFlag;
}

请注意，您还需要添加FontAwesomeModule到此imports功能。有关更多详细信息，请参阅文档。

这是两种描述方法的演示：https ://stackblitz.com/edit/components-issue-8znrc5

请注意，我还必须添加一些 CSS 以确保图标与按钮文本很好地对齐。

于 2019-06-09T17:21:57.113 回答
0

  1. 转到您的项目目录并运行此命令以安装谷歌材料图标包

    npm add material-design-icons.

  2. 接下来，更新“.angular-cli.json”文件以在编译应用程序时将网络字体包含到“index.html”页面中：

    { styles: [ "./assets/fonts/material-icons/material-icons.css" ] }

  3. 最后，您可以通过使用以下内容更新主应用程序模板来测试字体：

    <h1>Material Icons</h1> <i class="material-icons">account_circle</i> <i class="material-icons">thumb_up</i>

你可以参考这个网站。在创建 Angular 6 项目时，我按照该站点的所有步骤使用 mat-icons。更多的

你也可以看看这个stackblitz

更新 如果您想使用字体真棒图标，我建议您可以按照本指南开始。它超级简单易用。

使用命令安装 font-awesome 依赖项npm install --save font-awesome angular-font-awesome. 之后导入模块：

import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
于 2019-02-14T12:49:02.997 回答