【问题标题】:How do you add Font Awesome to Ionic 4你如何将 Font Awesome 添加到 Ionic 4
【发布时间】:2021-04-12 16:01:11
【问题描述】:

有很多关于如何在 Ionic 3 项目中包含 Font Awesome 的教程和文章,但我很难找到任何关于如何将 Font Awesome 添加到 Ionic 4 项目中的内容。那么这就提出了一个问题,如何在 Ionic 4 项目中添加和使用 Font Awesome?

我尝试使用以下tutorial,但没有取得多大成功。我尝试按照以下StackOverflow answer 中概述的步骤进行操作,但也没有用。

【问题讨论】:

  • 您似乎在几秒钟内就回答了自己的问题。这背后有什么具体原因吗?
  • 这是一项功能,当您提出问题时,您可以自己回答。我终于想出了如何做到这一点,所以我只是想与社区分享。由于 Q&A 风格在 SO 中可用,所以我继续这样做。
  • 所以,我猜您正在尝试创建一个社区 Wiki 帖子。在这种情况下,请先阅读:meta.stackexchange.com/questions/11740/…,然后阅读:stackoverflow.com/help/privileges/community-wiki
  • 回答你自己的问题问答风格是absolutly allowed and most welcome on SO,只要问题和答案都是高质量的。以问答方式回答问题社区 Wiki 帖子绝对不是强制性的……

标签: ionic-framework font-awesome ionic4


【解决方案1】:

要让 Font Awesome 在 Ionic 4 项目中工作,您可以按照以下步骤操作。

首先,您需要安装所有 npm 包,前两个是必需的,但您可以决定是否需要 solidregularbrands 图标,我将使用它们。继续并在终端中执行以下 npm 命令:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/angular-fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

完成此操作后,导航到项目中的 app.module.ts 并添加以下内容:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

根据您安装的字体包,添加以下内容:

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

在文件顶部导入它们后,您需要在导入中包含 FontAwesomeModule

.....
imports: [...., FontAwesomeModule],
.....

再一次,根据您选择的图标,您需要将它们添加到之前导入的 Font Awesome 库中。将其添加到您上次导入的下方(@NgModule() 上方):

library.add(fas, far, fab);

然后导航到要使用字体的页面模块,即home.module.ts,然后导入并添加FontAwesomeModule

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
....

@NgModule({
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
})

最后,您可以在该页面的 HTML 中使用该图标,方法是在您想要图标的位置插入以下内容:

<fa-icon [icon]="['fas', 'graduation-cap']" slot="end"></fa-icon>

您可以将fas 替换为正确的库,即farfasfab,然后是图标的名称,在本例中为graduation-cap

【讨论】:

  • @Memetican - 看看这个例子。应该解释得更清楚。 pastebin.com/zqea6T2r第24行就是你想看的。
  • 谢谢@Tachyon,我自己也想通了。看到位于功能代码块之外的指令行看起来很令人困惑。再次感谢。
  • 非常感谢! @Tachyon
  • 很好的说明。但是到目前为止,除非您使用 Angular 8,否则您将需要安装 0.3.0 版本,否则它将无法正常工作。 npm i --save @fortawesome/angular-fontawesome@0.3.0。其余的都是一样的。
  • @Saif。你试过 npm i --save @fortawesome/angular-fontawesome@0.3.0.使用“ng 版本”检查您的 Angular 版本。然后在此处检查兼容性:npmjs.com/package/@fortawesome/angular-fontawesome 请参阅我上面的评论。
【解决方案2】:

运行以下命令:

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

然后,在angular.json 中将其附加到“样式”上:

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

【讨论】:

【解决方案3】:

以防万一有人使用 FontAwesome PRO。我最近购买了 FontAwesome pro 图标并像这样集成它们:

  • 复制 src/assets/ 中的 FontAwesome webfonts 文件夹
  • 复制 src/theme/ 中的 FontAwesome scss 文件夹
  • 将 _variables.scss 中的 $fa-font-path 更改为 assets/webfonts !default;

  • 在 global.scss 中添加

    @import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
    @import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
    @import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
    @import './theme/[YourDirectoryfontawesomeScss]/light.scss';
    @import './theme/[YourDirectoryfontawesomeScss]/regular.scss';

最后,您可以将它们与 i 标签一起使用。例如

<i class="fas fa-stack-overflow"></i>

您可以在此处找到有关 fa- 类的更多详细信息 https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

【讨论】:

【解决方案4】:

我绞尽脑汁试图让它与 Ionic 5/Angular 10 一起工作,但无法让它工作。我最后想通了,如果其他人需要它。

对于 Ionic 5/Angular 10

在您的项目文件夹中运行ng add @fortawesome/angular-fontawesome@latest 并选择您需要的图标。

app.module.ts 中添加以下内容:

import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; //Solid icons
import { far } from '@fortawesome/free-regular-svg-icons'; // Regular icons
import { fab } from '@fortawesome/free-brands-svg-icons'; // Brand icons

并将FontAwesomeModule 导入到可声明的导入中,如下所示:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})

然后像这样导出一个库构造函数...

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, far, fab);
  }
}

转到您希望使用 Font Awesome 的模块(例如 mypage.module.ts)并导入 FontAwesomeModule

最后在您的 HTML 中,例如mypage.page.html 只需使用&lt;fa-icon icon="home"&gt;&lt;/fa-icon&gt; 来显示一个图标。

如果您遇到任何问题,请确保先停止 Ionic,然后再次运行 ionic serve,因为这会重新编译框架。

另请查看https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md,了解其使用中可用功能的完整列表。

【讨论】:

    【解决方案5】:

    对于 Angular 用户来说,最简单的方法是编写 ng add @fortawesome/angular-fontawesome@latest

    【讨论】:

      猜你喜欢
      • 2018-04-05
      • 1970-01-01
      • 2017-11-28
      • 1970-01-01
      • 2013-04-05
      • 1970-01-01
      • 2023-03-18
      • 1970-01-01
      • 2019-12-31
      相关资源
      最近更新 更多