Vue项目中使用icon图标

发表于 更新于 分类于 阅读次数： 本文字数： 672 阅读时长 ≈ 1 分钟

1.登录阿里图标库
2.搜索需要使用的图标，鼠标放到图标上，点击“购物车”图标添加入库。


3.点击右上角“购物车图标”，把选好的图标加入到新项目。

4.在打开的页面中选择“更多操作”=>“编辑项目”，修改“FontClass/Symbol 前缀”，这样生成的图标class会带上你自定义的前缀。

5.点击“Font class”=>“下载至本地”。

6.解压下载的压缩包，重命名为fonts，把fonts文件夹复制到Vue项目的assets目录下。
7.在main.js文件中引入iconfont.css。
import './assets/fonts/iconfont.css'
8.复制图标的类名。

9.把组件（我使用的是Element-UI组件库）的prefix-icon或suffix-icon属性设置为iconfont和复制的类名即可。

<el-form-item>
  <el-input prefix-icon="iconfont icon-shopxingmingyonghumingnicheng"></el-input>
</el-form-item>
<el-form-item>
  <el-input prefix-icon="iconfont icon-shopmima"></el-input>
</el-form-item>

10.效果如下：