vue实战之电商管理——font-class的制作与使用

font-class的作用

在制作网页时，会使用到很多的图标，如登陆的用户图标以及密码图标，还有很多其他的使用，而这些素材是怎么引入到项目中的？除了魔术图之外，我有接触到了另一种技术——font-class实现图标资源导入使用。

font-class的制作

1.进入阿里图标库；
2.搜索想要的图标后添加图库，点击这个图标

3.选择好图片之后，进入库，点击如下图标

4.将库中的图片导入到项目中，如下：

5.之后就是下载操作：

6.下载后解压到当前文件，并把该文件复制到项目对应的目录中，制作完成。

font-class的使用

1.在main（项目的入口程序）中使用import导入

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

2.在其他的.vue文件中的使用格式如下示例

 <el-input  prefix-icon="iconfont icon-yonghu"></el-input>

其中 iconfont 为主类（即iconfont .css文件）icon-yonghu为子类，这个子类的名字如何确定
2.1使用浏览器打开解压的文件夹中的demo_index.htm，如下所示

点之后的字母几位类名称。