使用阿里字体图标

比font awesome小。

1、注册账号：“http://www.iconfont.cn/”注册账号，然后登录。或者使用快捷登录，比如github快捷登录。

2、图标库里面去选择自己中意的图标添加到库，如下图：

3、图标选的差不多了打开右侧的库，把库里面的图标添加到你的项目（没有项目就新建一个），如果使用github登录，项目是和github中的项目同步的。

4、把整个项目下载到本地：注意，选择Font class。

5、将下载的文件解压，比如放到font中，然后将该font文件夹复制到项目中，该文件夹中一般包含以下几个文件。

 

 

 

6、在main.js中导入图标字体

//导入阿里字体图标
import \'./assets/fonts/iconfont.css\'

7、然后在项目中使用，比如Login.vue组件中，template的代码

<el-form-item prop="username">                    
    <el-input v-model="ruleForm.username" placeholder="用户名"
        prefix-icon="el-icon-user">    <!-- 直接使用element中的字体 -->                                    
    </el-input>
    <!-- <el-input v-model="ruleForm.username" placeholder="用户名"
        prefix-icon="iconfont icon-bussiness-man">      <!--使用fontclass字体-->                                    
    </el-input>  -->                    
</el-form-item>