代码之家 › 专栏 › 技术社区 › Tachyon

如何将字体添加到爱奥尼亚4中?

ionic4 font-awesome ionic-framework

Tachyon · 技术社区 · 7 年前

有很多关于如何在一个爱奥尼亚3项目中包含字体Awesome的教程和文章,但是我很难找到任何关于如何将字体Awesome添加到爱奥尼亚4项目中的教程和文章。所以这就提出了一个问题,在一个爱奥尼亚4项目中,如何添加和使用字体Awesome?

我试过用下列方法 tutorial 没有太多成功。我试着按照下面列出的步骤 StackOverflow answer 也不起作用。

2 回复 | 直到 7 年前

Tachyon 7 年前

要让字体在一个爱奥尼亚4项目中工作出色,您可以遵循以下步骤。

首先,您需要安装所有的NPM包,前两个包是必需的,但是您可以决定是否需要 solid , regular 或 brands 图标,我将使用所有图标。继续在终端中执行以下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],
.....

再一次,根据您选择的图标,您需要将它们添加到先前导入的字体库中。将此项添加到上次导入的内容下:

library.add(fas, far, fab);

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

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

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

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

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

你可以替换, fas 使用正确的库,即 far , 火焰原子吸收光谱法 和; fab 然后是图标的名称,在本例中是 graduation-cap .

ppichier 7 年前

以防万一有人与fontawome pro打交道。我最近购买了FontAwesome Pro图标,并将其集成如下:

复制src/assets中的fontaweswebfonts文件夹/
复制src/theme中的fontawesome scss文件夹/
在variables.scss中更改$fa字体路径 assets/webfonts !default;
外接程序global.scss

@导入'./theme/[yourDirectoryFontWesomeScss]/fontAwesome.scss';
@导入“./theme/[yourDirectoryFontWesomeScss]/solid.scss';
@导入“./theme/[yourDirectoryFontawesomescsss]/brands.scss';
@导入“./theme/[yourDirectoryFontWesomeScss]/light.scss';
@导入“./theme/[yourDirectoryFontWesomeScss]/regular.scss';

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

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

你可以在这里找到更多关于足总课程的细节。 https://fontawesome.com/how-to-use/on-the-web/setup/getting-started