阿里iconfont使用

一、作为图标引用

1、选择需要的icon，点击下载按钮，将icon以png格式下载至本地

2、将下载好的图标放入项目对应文件夹中

3、在需要使用对应图标的界面中先引入图标路径

import diary from '../../assets/images/Flexbar/diary.png'

4、 使用标签<img>引用图标

<img src={diary} alt='' />

二、作为代码引用

1、将所需图标加入至购物车

 

2、当选好所有icon时选择下载代码

 

 3、将下载好的文件夹放入assets中

4、在入口文件index.js中引入图标css文件

import './assets/font/iconfont.css'

 5、在iconfont.css文件中设置icon大小，查询icon名称

 6、根据icon名称利用标签<i>实现对icon的调用

<i className={`iconfont icon-home`} />