使用angular正确使用fortawesome的方法!

宫俊才
2023-12-01

具体参考下面的文章:链接

http://www.php.cn/js-tutorial-394509.html

1 .使用fortawesome的icon库

引入方式

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

具体所需要的可以参考fortawesome的中文文档:http://www.fontawesome.com.cn/

菜鸟教程:http://www.runoob.com/font-awesome/fontawesome-icons-spinner.html

2. angular如何使用fortawesome

参考文章; http://www.php.cn/js-tutorial-394509.html

第一步,使用npm工具安装fortawesome环境

$ npm install @fortawesome/fontawesome-svg-core --save

$ npm install @fortawesome/free-solid-svg-icons --save

$ npm install @fortawesome/angular-fontawesome --save

第二步: 在app.module.ts,使用library导入库,按你的需要导入图标

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { library } from '@fortawesome/fontawesome-svg-core';

//然后导入图标
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { library } from '@fortawesome/fontawesome-svg-core';



//使用,例如你想使用faCoffee 图标,如下导入
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

//将图标添加到library中
library.add(faCoffee);

第三步:使用图标

<!--xxx.html -->

<fa-icon [icon] = "['coffee']"></icon>

<!--如果想使用动画的icon,可以添加如下属性  [spin] 旋转属性, [pulse]脉冲属性 -->

<fa-icon [icon] = "['coffee']"  [spin]="true"  [pulse]= "true"></icon>

 

 类似资料: