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中使用矢量图的更多相关文章

  1. 在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)

    在 Xcode 6 中使用矢量图( iPhone 6 置配 UI) (本文转载:http://iosdeveloper.diandian.com/post/2014-09-25/40063062789 ...

  2. 如何从PDF文件中提取矢量图

    很多时候我们需要PDF文档中的插图,直接用pdf中的复制或者截屏软件只能提取位图格式的图片,放大缩小难免失真. 本文教大家一种一种从pdf中提取矢量图的方法. 工具软件: 1 adobe acroba ...

  3. 在xcode6中使用矢量图(iPhone6置配UI)

    转载出处:http://blog.xoneday.com ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你 ...

  4. vue中轮播图的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue中饼状图的使用

    图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"&g ...

  6. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  7. ps中的位图,矢量图,颜色模式

    什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB ...

  8. C#中如何生成矢量图

    主要的功能就是使用C#画矢量图,然后导出到Word.Excel.Powerpoint中,并且能够再次被编辑.以下是解决过程: 首先应该确定在Office文档中可编辑图形使用的格式:学习了相关资料,了解 ...

  9. 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...

随机推荐

  1. shell 脚本基础

    弱类型语言 bash 变量类型 本地变量 环境变量 局部变量 位置参数变量 特殊变量 运行 无执行权限 bash hello.sh 有执行权限 检查语法 bash -n user.sh 跟踪每一行的执 ...

  2. Codeforces #590 D 二维树状数组

    题意 给一个10^5之内的字符串(小写字母)时限2s 输入n,有n个操作  (n<10^5) 当操作是1的时候,输入位置x和改变的字母 当操作是2的时候,输入区间l和r,有多少不同的字母 思路 ...

  3. dp-捡金币

    来源:牛客网 题目描述   最近,奶牛们热衷于把金币包在面粉里,然后把它们烤成馅饼.第i块馅饼中含有Ni(1<=Ni<=25)块金币,并且,这个数字被醒目地标记在馅饼表面. 奶牛们把所有烤 ...

  4. 「USACO5.5」矩形周长Picture

    题目描述 墙上贴着许多形状相同的海报.照片.它们的边都是水平和垂直的.每个矩形图片可能部分或全部的覆盖了其他图片.所有矩形合并后的边长称为周长. 编写一个程序计算周长. 如图1所示7个矩形. 如图2所 ...

  5. Python3.5学习之旅——day1

    本节内容: 1.Python介绍 2.Hello World程序 3.变量\字符编码 4.用户输入 5.if-else语句 6.循环语句 一.Python介绍 Python是一种动态解释性的强类型定义 ...

  6. Ubuntu开启端口(持久化)

    1.查看已经开启的端口 sudo ufw status 2.打开80端口 sudo ufw allow 3.防火墙开启 sudo ufw enable 4.防火墙重启 sudo ufw reload

  7. PTA的Python练习题(七)

    不知不觉一个星期过去了,继续从 第3章-12 求整数的位数及各位数字之和 开始做题 1. 我原来想用题目漏洞做题的,不过想想还是算了自己写个完整的: a=int(input()) b=len(str( ...

  8. JS原型链的理解和使用(二)

    根据在创建对象的时候,创建出来的对象的__proto__指向创建这个对象的函数的prototype属性. 由于在调用对象的属性或者方法的时候会首先在对象的作用域中查找指定的属性或者方法,如果未找到则会 ...

  9. 基于Modelsim的视频流仿真

    一.前言 最近在看牟新刚写的<基于FPGA的数字图像处理原理及应用>,书中关于FPGA数字图像处理的原理的原理写的非常透彻,在网上寻找了很久都没有找到完整的源代码工程,因此尝试自己做了补充 ...

  10. 关联容器:unordered_map详细介绍

    版权声明:博主辛辛苦苦码的字哦~转载注明一下啦~ https://blog.csdn.net/hk2291976/article/details/51037095 介绍 1 特性 2 Hashtabl ...