vue中使用矢量图

1.打开矢量图库,将需要的图表添加至购物车

 

2.将购物车的图标添加到一个项目中(便于后期增加更新)并下载至本地

3.将这四个文件及iconfont.css添加至项目的assets中

4.打开iconfont.css正确引入上边的四个文件

@font-face {
  font-family: "iconfont";
  src: url('../style/iconfont.eot?t=1548125082389');
  /* IE9 */
  src: url('../style/iconfont.eot?t=1548125082389#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALoAAsAAAAABpAAAAKaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBHIE5ATYCJAMICwYABCAFhG0HMBvfBcgekiRFIgQUIIUSDyOEePj/Mdx9//+ZW96yOHgjkfBIJbFGyV53VgqH0LTSdN41/QyIM1RlOWA+SA4K6UszQrRTZnMEwk1+/Qu314jDaRMokPnnXS5zDJzUBRgHUqBjDYqsQEJvGLvgBR4nUGuQhtNecWUj8FTY4wLxUJE44FkIKgrLVAuVDUuLuFShOr1Kj4DX0ffjJ1N4klRkdv7hgyIR5H51clwm/0+6ExCECGh1BTLmAYU4bUzucxGM5qI26WoUOFZl8DX3///ALI5qEOyvs8vrQT8UPpPIEz8qZwKF3iwBTibdQm4P8eSWw+97nV4/N7+9tby8ND0/NzbujgT8LH/viIs3PrX219fOTj7byud2tpcQ5Tr1yDj9KYjr9e+P2eEFvOTpcvnrTdXJk3mvnZ2L9PIuz7n/4gin3byta7DU7ftUeZiHX/rY0wXWpOTu2tioQr4sH+QC+H+dr3LOr/yNl1uX4z0Bmf+q6wr4Yrk9jvz/r4thbqD6hK7gx4kGthRDYptS0USN2WSJyw1V1arFf9jb6neqtuMu7aG6IGJIqgwgqzZOLNR5VKizHqpU7Vrl1JpTAlfXaUO5iFKDWXMAodkDkkZXyJo9EQv1BxU6/aFSc7ig1nmEbFlnMhTvAoo4hkTID0FFIDbsWph3XFmPpD4LR/OSiN6MqEOJQKPOUM6UIBuiS8xw9EsmxjDElFhhMTgNWSwE2ilRkcB0MmP2dL0eN71JJxAr8LaLQjgMIoJ4QyCFgLDBQWfGu/L5eoikjwWHdjTVuZshlIPSP2SkYxhALFHaBjU9yisO/SQmDINBGEVYQcVgEGJhQUD25kEqRMDoyBPidun0Tjs8VKnbXm39u11Qy9alcHKzyhcKRzwDAAAA') format('woff2'),
    url('../style/iconfont.woff?t=1548125082389') format('woff'),
    url('../style/iconfont.ttf?t=1548125082389') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('../style/iconfont.svg?t=1548125082389#iconfont') format('svg');
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 如果不想用他们规定的类名 就将这个注释掉 */
/* .icon-xiaoxi:before {
  content: "\e740";
} */

5.如果全局都要使用字体图标,就在main.js中将iconfont.css文件引入

6.在项目标签中使用(注意添加class=‘iconfont’)类名

<i class="iconfont">&#xe740;</i>

 

转载于:https://www.cnblogs.com/wjsy/p/10302644.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值