我们在使用vue进行项目开发的时候,很多时候会手撸样式或者使用ui框架,这时候ui框架提供的原生icon图标可能会满足我们现有的需求,这时候我们就可以引用第三方图标库来达到我们的需求。
这里讲解的是如何在vue中使用阿里图标;
阿里图标库有三种使用方式(Unicode、Font class、Symbol)
这里主要说明 Font class 的使用方法(其他方法类似)
一、引入
- 登录阿里图标官网注册一个帐号,在图标库中选取自己需要的图标加入购物车
- 点击购物车查看我已经添加到购物车的图标,点击添加至项目,没有项目新建一个
- 进入我的项目中,将图标下载至本地,在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中引用阿里图标的详细步骤了,完结撒花。