Angular 6引入Font Awesome图标教程

小渣渣

Font Awesome是一款非常棒的网页字体图标库，提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

先上效果图：



环境：

Angular CLI: 6.2.4
Node: 8.9.2
OS: win32 x64

教程：

npm安装命令：

登录可见。

C:\project\git\itsvse>npm install --save font-awesome angular-font-awesome
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ font-awesome@4.7.0
+ angular-font-awesome@3.1.2
added 69 packages and updated 1 package in 10.117s

导入模块：

在app.module.ts或者子路由模块里面导入：

登录可见。

引入scss样式表：

angular.json，根据使用的css语法决定引入样式库，如下：

登录可见。

如果您没有使用CLI，请将样式表导入到您的index.html文件中：

登录可见。

（大家直接忽略就行）

使用：

登录可见。

登录可见。

属性	类型	配置	可选
name	String	F-A Icons	No
size	String	lg, 2x, 3x, 4x, 5x	Yes
fixed	Boolean	true | false	Yes
animation	String	spin | pulse	Yes
rotate	Number | String	90 | 180 | 270 horizontal | vertical	Yes
inverse	Boolean	true | false	Yes

字体图标搜索：https://fontawesome.com/icons

参考资料：https://www.npmjs.com/package/angular-font-awesome

yydnjas

谢谢大佬