安装 Package

　　npm 方式：

其中「free-solid-svg-icons」是经典样式，其他还有「regular」和「light」可选：

在 app.module.ts 中导入基本模块

　　导入后便无须在其他组件中重复导入了。这是以下使用图标方式的基础。

按需使用方式一

　　在 component 里导入你所需要的图标：

注意：这里导入的图标名字要加 fa 前缀，并使用 camelCase 命名法。导入后，你便可以在 html 模板中用以下方式使用图标：

注意在 html 模板中要直接使用图标名。图标可在官网图标库查询。

按需使用方式二

　　第二种按需使用的方式是使用 library,使用 library 后你就不用再在 component 中导入图标了，一切都在 app.module.ts 中完成：

有了 library 后，接着再添加你需要用的图标：

然后把图标加入到 library 里：

这样你就可以在 html 模板中直接使用了。

全套导入

　　对于一般规模的网站，我还是推荐将图标全部导入，想用什么就用什么，比查找名字一个一个导入方便。全套导入的方式就是用图标包的别称代替图标名：

其中「fas」的「s」代表的是「free-solid-svg-icons」的「solid」。以此类推，其他样式的导入是：

然后在 library 中添加即可：

添加之后，你就可以在 html 中任意使用图标了。

在 html 模板中的写法

　　之前的方式：

其实是一种简便写法。它默认使用了 fas 样式的图标，如果要 far 或 fab，你需要这样写：

将样式包别称作为前缀填入数组第一个元素。我推荐这种精确的写法。

图标基本特效

　　Font-Awesome 还有很多很棒的图标特效——可以通过 html 的标签属性实现。这里直接复制文档中一些基础的用法：

旋转与脉搏式转动:

固定宽度：

边框:

翻转:

尺寸:

按角度偏转:

靠左或靠右排列:

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。