我如何使用 font-awesome 5使用 Angular (2+)?
我试过将它添加到一个组件中:
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>
但这给了我一个圆圈中闪烁的问号。
最佳答案
你有两个选择:
1.使用angular-fontawesome库
只需按照他们的 github page 上的说明进行操作即可.
2.直接使用fontawesome 5
确保您已经安装了所有相关的 npm packages .
对于 Pro 包,请查看 this .
导入相关图标:
import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid'; import fontawesome from '@fortawesome/fontawesome';
将图标添加到
fontawesome
库在全局范围内(不在组件的构造函数内):fontawesome.library.add(faChevronLeft, faChevronRight);
在 html 中使用它:
<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>
注意 html 中的前缀:
fas
用于fontawesome-free-solid
图标(也适用于fa
)<span class="fas fa-chevron-left"></span>
fab
fontawesome-free-brands
图标<span class="fab fa-bitcoin"></span>
far
fontawesome-free-regular
图标<span class="far fa-chevron-left"></span>
fal
用于fontawesome-free-light
图标(专业版)<span class="fal fa-chevron-left"></span>
重要提示:
使用变量来定义 fontawesome
类是很好的,只要它只完成一次(在初始化时)。但是,如果变量改变了它的值,它不会反射(reflect)在 html 中。
考虑这个例子:
<span class="fas fa-chevron-{{direction}}"></span>
这将在初始化时放置正确的图标,但如果之后方向发生变化,则不会反射(reflect)出来。
这样做的原因是 fontawesome 5
用适当的 svg
替换了用 fa ...
分类的元素,一旦它被替换,没有变量影响这个.
如果你想让上面的 html 反射(reflect)运行时的变化,你必须像这样改变它:
<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
就可以了。
进一步阅读:
关于angular - 带有 Angular 的 Font Awesome 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48027322/