vue项目中使用阿里巴巴矢量图标库iconfont

效果

1. 打开iconfont阿里巴巴官网

https://www.iconfont.cn

2. 登录网站，新建项目

3. 把需要的图标添加至购物车

4. 打开购物车并选择添加至刚新建的项目，然后确定

5. 接下来可以在项目中看到你选中的图标，这时候可以点击下载至本地

6. 打开下载的zip包就可以看到里面的文件，将里面的文件取出

7. 在vue项目下的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下

8. 在main.js中引入

// 引入Iconfont 矢量图标库
import './assets/icon/iconfont.css'

9. 在vue项目中使用

<el-menu 
:default-active="$route.path" 
:router="true"
class="el-menu-demo" 
mode="horizontal" 
@select="handleSelect"
active-text-color="#409EFF"
>
    <div><img src="@/assets/img/logo.png" class="logo"></div>
    <el-menu-item index="/index"><span class="icon iconfont icon-home"></span><span>主页</span></el-menu-item>
    <el-menu-item index="#1"><span class="icon iconfont icon-all"></span><span>资源</span></el-menu-item>
    <el-menu-item index="#2"><span class="icon iconfont icon-survey"></span><span>问答</span></el-menu-item>
    <el-menu-item index="#3"><span class="icon iconfont icon-company"></span><span>社区</span></el-menu-item>
</el-menu>

使用 <span class=“icon iconfont icon-home”>,修改的时候只需要修改icon-home这个class就可以了,这个class名称可以在font class中看到

注意：每次新增图标后都要覆盖一次资源文件