Vue中级指南-03 如何在Vue项目使用阿里iconfont图标

咱们在使用vue进行项目开发的时候,不少时候会手撸样式或者使用ui框架,这时候ui框架提供的原生icon图标可能会知足咱们现有的需求,这时候咱们就能够引用第三方图标库来达到咱们的需求。

这里讲解的是如何在vue中使用阿里图标;

阿里图标库有三种使用方式（Unicode、Font class、Symbol)
这里主要说明 Font class 的使用方法（其余方法相似）
复制代码

1、引入

• 登陆阿里图标官网注册一个账号,在图标库中选取本身须要的图标加入购物车

• 点击购物车查看我已经添加到购物车的图标,点击添加至项目,没有项目新建一个

• 进入个人项目中,将图标下载至本地,在vue项目中assets文件下新建iconfont文件夹将下载的图标复制到这里

由于这里主要说明Font class 的使用方法,因此只须要拷贝这两个文件（其余方法相似）
复制代码

• 注意这里须要将iconfont.css文件中引用的路径所有修改成'./iconfont.ttf'

这里所有改成'./iconfont.ttf'是由于咱们当前只使用Font class 的使用方法（其余方法相似）
复制代码

• 在main.js文件中引入阿里图标,将其挂载到全局,之后每一个页面均可以使用

  

这里引入阿里图标样式可能会报错,缘由是没有css-loader依赖包,安装一下就能够了
npm install css-loader -S
复制代码

• 这里阿里图标的引入就所有完成了,接下来使用方式如图:

---

这里使用阿里图标都须要加iconfont前缀类名,不然不会显示出来的,固然这个类名是能够在阿里图标官网本身编辑的,默认都是iconfont

• 修改默认iconfont前缀类名

• 修改Font Famliy 修改成myicon,点击保存从新下载至本地替换当前阿里图标便可

• 这时候使用图标时前缀加myicon便可了

以上就是如何在vue中引用阿里图标的详细步骤了,完结撒花。