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"></i>
vue中使用矢量图的更多相关文章
- 在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)
在 Xcode 6 中使用矢量图( iPhone 6 置配 UI) (本文转载:http://iosdeveloper.diandian.com/post/2014-09-25/40063062789 ...
- 如何从PDF文件中提取矢量图
很多时候我们需要PDF文档中的插图,直接用pdf中的复制或者截屏软件只能提取位图格式的图片,放大缩小难免失真. 本文教大家一种一种从pdf中提取矢量图的方法. 工具软件: 1 adobe acroba ...
- 在xcode6中使用矢量图(iPhone6置配UI)
转载出处:http://blog.xoneday.com ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你 ...
- vue中轮播图的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中饼状图的使用
图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"&g ...
- D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图
首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...
- ps中的位图,矢量图,颜色模式
什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB ...
- C#中如何生成矢量图
主要的功能就是使用C#画矢量图,然后导出到Word.Excel.Powerpoint中,并且能够再次被编辑.以下是解决过程: 首先应该确定在Office文档中可编辑图形使用的格式:学习了相关资料,了解 ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图
原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...
随机推荐
- 杭电 2159 fate(二维背包费用问题)
FATE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 【SSM sql.xml】日志查询mapper.xml
LogInfoMapper.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapp ...
- Mysql 一些细节方面解析(一)--MyISAM和InnoDB的主要区别和应用场景
myisam和innodb 简介:myisam读的效果好,写的效率差,这和它数据存储格式,索引的指针和锁的策略有关的,它的数据是顺序存储的,他的索引btree上的节点是一个指向数据物理位置的指针,所以 ...
- Dart语言学习(十三) Dart Mixins 实现多继承
Mixins Mixins(混入功能)相当于多继承,也就是说可以继承多个类,使用with关键字来实现Mixins的功能. 那么多个类中有相同的方法时候,会被覆盖吗?覆盖的先后是什么? class A{ ...
- Vagrant 安装使用
先安装虚拟机 https://www.virtualbox.org/ 再安装 https://www.vagrantup.com/ 1.nginxhttp://nginx.org/download/ ...
- Java日期时间API系列10-----Jdk8中java.time包中的新的日期时间API类的DateTimeFormatter
1.DateTimeFormatter final修饰,线程安全,用于打印和解析日期-时间对象的格式化程序. 创建DateTimeFormatter: DateTimeFormatter dateTi ...
- python 中的生成器(generator)
生成器不会吧结果保存在一个系列里,而是保存生成器的状态,在每次进行迭代时返回一个值,直到遇到StopTteration异常结束 1.生成器语法: 生成器表达式:通列表解析语法,只不过把列表解析的[] ...
- GitHub 网站汉化
居然是一个中文Github网站!该不会是个假的吧? 2018-09-03 17:30 前几天分享了一篇文章——3个搜索技巧!在 GitHub上快速找到实用资源!眼尖心细的读者发现了文中的Github网 ...
- EOS主网搭建教程--&&--搭建节点--&&--搭建mongodb数据库
EOS主网搭建教程: 1.git clone https://github.com/EOS-Mainnet/eos.git --recursive 2.cd eos 3.git tag (查看有哪些分 ...
- Linux命令:vmstat命令
vmstat:虚拟内存状态查看命令 命令选项 vmstat 1 #每秒钟刷新1次 vmstat 1 3 #每秒刷新1次,只刷3次 vmstat -s #显示内存 ...