带有Angular的Awesome 5字体 [英] Font Awesome 5 with Angular

问题描述

如何将字体真棒 5 与Angular(2+)配合使用?

How do I use font-awesome 5 with Angular (2+)?

我尝试将其添加到组件内部:

I've tried adding this inside a component:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

，然后使用HTML:

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

但这给了我一个圆圈的闪烁问号.

But this gives me a blinking question mark in a circle.

推荐答案

您有两个选择:

只需按照其 github页面上的说明进行操作.

Just follow the instructions on their github page.

确保已安装所有相关的 npm软件包.
对于专业版软件包，请查看此.

Make sure you have installed all the relevant npm packages.
For Pro packages check out this.

1. 导入相关图标:

1. Import relevant icons:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

将图标添加到fontawesome库在全局范围内(不在组件的构造函数之内):

Add the icons to fontawesome library in global scope (not inside the component's constructor):

fontawesome.library.add(faChevronLeft, faChevronRight);

在html中使用它:

Use it in html:

<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

注意html中的前缀:

Mind the prefixes in html:

• fas用于fontawesome-free-solid图标(也适用于fa)

• fas for fontawesome-free-solid icons (works also with fa)

<span class="fas fa-chevron-left"></span>

fab用于fontawesome-free-brands图标

fab for fontawesome-free-brands icons

<span class="fab fa-bitcoin"></span>

far用于fontawesome-free-regular图标

far for fontawesome-free-regular icons

<span class="far fa-chevron-left"></span>

fal用于fontawesome-free-light图标(专业版)

fal for fontawesome-free-light icons (pro)

<span class="fal fa-chevron-left"></span>

重要提示:

只要变量一次(在初始化时)就可以使用变量定义fontawesome类.但是，如果变量更改其值，它将不会反映在html中. 考虑以下示例:

It's fine to use variables to define fontawesome classes as soon as it is done only once (at initialization). However, if the variable changes its value it won't be reflected in html. Consider this example:

<span class="fas fa-chevron-{{direction}}"></span>

这将在初始化时放置正确的图标，但是如果以后更改方向，则不会反映出来.
这样做的原因是fontawesome 5用适当的svg替换了fa ...分类的元素，并且一旦替换，没有变量会影响此.
如果您希望上面的html反映运行时更改，则必须像这样更改它:

This will put the right icon at the initialization time, but if the direction changes afterwards it won't be reflected.
The reason for this is that fontawesome 5 replaces the elements classed with fa ... with appropriate svg and once it is replaced no variable affects this.
If you want the above html to reflect runtime changes you have to change it like this:

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

外部的span是必需的，因为内部的span被svg替换，因此您不能在其上放置*ngIf.

The outer span is necessary as the inner span is replaced with svg so you can't put *ngIf on it.

进一步阅读:

• 在font.wesome 5中使用node.js
• FontAwesome API

• Use fontawesome 5 with node.js
• FontAwesome API

这篇关于带有Angular的Awesome 5字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！