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>

原文地址:https://www.cnblogs.com/wjsy/p/10302644.html

时间: 2024-10-10 06:57:15

vue中使用矢量图的相关文章

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

在 Xcode 6 中使用矢量图( iPhone 6 置配 UI) (本文转载:http://iosdeveloper.diandian.com/post/2014-09-25/40063062789) iOS应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x 尺寸和一个@2x尺寸.这样你的应用看上去才足够精美.但缺点是你必须单独生成这些文件.随着iPhone6和iPhone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源. 幸

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

ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你的应用看上去才足够精美.但缺点是你必须单独生成这些文件.随着iphone6和iphone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源. 幸运的是,苹果在xcode6中提供了一些伟大的工具来管理这些资源.更好的是,这种方式也让你的应用程序能够运行在未来的ios设备上打下了基础.工具之一是xcode6和ios8支持以Storyboard(或xib

[iOS] 试一发 Xcode6 中的矢量图

Xcode6中有一个十分方便的功能,就是导入的图片资源支持矢量图格式.这对于开发者来说无疑是个天大的好消息. 不过,这矢量图怎么搞?有什么好处?效果到底如何?不妨打开 Xcode6 来一发试试看,亲自体验一下矢量图的魅力. 我们先用Sketch制作了一个30*30的图标,导出了pdf和png格式: 然后在Xcode6的 Images.xcassets中添加两个图标.首先是矢量图版本的: 接下来是PNG版本的,我们只上传了@1x 版本的位图: 然后我们找一个页面,同时放上两个图片进行比较. 第一次

vue中轮播图的实现

轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> &l

vue中饼状图的使用

图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"></div> </div> </template> <script>   export default {     props: {       // 样式       echartStyle: {         type: Object,        

Android UI:矢量图使用

一.矢量图简介最近在进行Android App"瘦身 "的时候,了解到矢量图(VectorDrawable)相关概念.从Android5.0(API level 21)开始,有两个类支持矢量图:VectorDrawable和AnimatedVectorDrawable.VectorDrawable是一个矢量图,定义在一个XML文件中的点.线和曲线,和它们相关颜色的信息集合.AnimatedVectorDrawable是矢量图动画,使用多个XML文件而不是针对不同分辨率使用多个图片来实现

阿里矢量图的应用--flex布局--vue中$router和$route的方法

1.阿里矢量图字体图标的用法 2.flex布局 display:flex:设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项 接着设置子元素主轴方向上的排列方式 justify-content: flex-start让子元素从父容器的起始位置开始排列: flex-end:让子元素从父容器的结束位置开始排列: ? center:让子元素从父容器的中间位置开始排列: ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距: ? space-around:将多余的空

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

什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB模式.CMYK模式.HSB模式.Lab颜色模式.位图模式.灰度模式 1:RGB模式 是Photoshop中最常用的模式,也被称之为真彩色模式,主要是由R(红).G(绿).B(蓝)3种基本色相加进行配色,并组成了红.绿.蓝3种颜色通道,每个颜色通道包含了8位颜色信息,每一个信息是用0~255的亮度值来

Xcode项目中使用PDF 格式的矢量图作为图片资源

从xcode6开始, Xcode项目中可使用PDF 格式的矢量图(1X)作为图片资源. Xcode 会自动使用矢量图等比适配,而不需要再导入 @2x.@3x 多张切图.这样不仅省去了PNG图片还减少了图片资源众多管理,命名的麻烦. 使用方法: 把PDF格式的矢量图形添加到Xcode的素材管理分类 - Asset Catalog里, 调用图片集合名字即可 1.在Xcode里打开Images.xcassets. 2.创建一个新的图片集合 - New Image Set. 3.在属性检查器 - Att