vue 项目中添加阿里巴巴矢量图
1. 选择需要的图标,添加到购物车
2. 打开购物车,添加至我的项目
3. 打开项目列表 - 更多操作 - 编辑项目
修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-custom
4. 点击下载至本地,解压文件后
将里面各个文件(除去demo_index.html和demo.css)复制到 src/assets/icons 下:
5. 打开 iconfont.css, 作如下修改
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1552123170809'); /* IE9 */
src: url('iconfont.eot?t=1552123170809#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABwwAAAKtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFhATYCJAMMCwgABCAFhG0HQBsxBsgekiQlCogQgo4rCEGY4uFrDX1/d+8CAApQZSIBxxMU0ZhOFZB0pDs+QhV1XeB/1/QPAFVe1TDXVlaNSLWsDpMDatOM2aJQBL5Cb3Ju81g3gD5x77TpC8d+luU2x8DuUxfFcUCB7oFRERVIQN4wdtVSeUj3CTQbN6Boe2IuDpUKvCwQL01dhspCUlHMSqNQN+wt4rNKY3qTfgCf1Pfjn3BUklQZXrvzeFyDoZ+JXz1567qbgkS1nB/mITIWgELcbiyeKBEmu0SzsbS7sVaEtFTm+hqlDMz1Qf94iajh9lYwAw3poVRMRvCrRwE5yItrNGEbOAL0Xn+lYEbOrXXtd5qg8Sa6+Umd1qN4IplMrTad3m3dVne+vd9+yNRl1Nb+ptrFxPnW+JlrK8rWm043PwCDXVjnk2/8J/O98Fp4GbRmxmbGofz1utBEA7RJOC/foRKONl421j54fT3uPubzrroDdUp91whIcG9+lc7B9ddMzOt/+jduXwRPxIbl/40tBZzfXQdU/PprMSwMGu8jFPxX1cCBEmiwKxdPyZRRJVtUdtcOzUHENRzt9jXd3Dc4T2gsqEwkDcaQNZogF/oCKi2WUGu0hmbzJg+36MGUiNKEOfsAodMLknZfkHV6Ixf6Jyr9/lHrjBI0O4qeM1tMhVm9xYjMiYaUZWSqvkeph1fHnVGizzsyy2uUMElY3sygEA6WK5PEI2yJDfkFPcw5RZT5LpoAjxHH8VGW+RZROTY4z0YEgTa9CKu+C9W2MISMIzSIYhliUvk8VIznqiufjyJ08xwy1kHoyycRTJ45PRKCBQeQJ43eIMKjPJO3QBfGcRRCMT4XMgH8hEOKPiTbPMtCqDjMmJDPihDQMDrUiLc3u/93AprhvTlS5CjqB7KpyV6dtK0YrGDLJgAAAAA=') format('woff2'),
url('iconfont.woff?t=1552123170809') format('woff'),
url('iconfont.ttf?t=1552123170809') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1552123170809#iconfont') format('svg'); /* iOS 4.1- */
}
[class^="v-icon-custom"], [class*=" v-icon-custom"] {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-newfont-menu:before {
content: "\e655";
}
.el-icon-newfont-nav:before {
content: "\e728";
}
6. 在main.js 中引入 iconfont.css
import '@/assets/icons/iconfont.css'
7. 页面中使用以上图标
<span class="el-icon-newfont-menu"></span>
vue 项目中添加阿里巴巴矢量图的更多相关文章
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- vue项目中使用bpmn-流程图预览篇
前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- 在vue项目中添加特殊字体
这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...
- vue项目中添加百度地图功能及解决遇到的问题详解
第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...
- vue项目中添加单元测试
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
随机推荐
- DOIS 2018 — OneAPM 蓝海讯通以数据为中心的 AIOps 平台亮相
AIOps 近两年开始在运维圈子里面火了起来.一夜间传统和新兴的运维管理软件供应商,IT 运维系统开发商,大数据厂商,人工智能算法提供商,还有 BAT,大家都在谈论这个话题.在短短的不到 1 年时间中 ...
- zabbix监控tomcat(使用jmx监控,但不使用系统自带模版)
一,zabbx使用jmx监控tomcat的原理分析 1.Zabbix-Server找Zabbix-Java-Gateway获取Java数据 2.Zabbix-Java-Gateway找Java程序(j ...
- C#-基本语法(三)
关键词 关键字,是一些被C#规定了用途的重要单词 在Visual Studio的开发环境中,关键字被标识为蓝色 例如: using:导入命名空间 class:声明类 static:静态 void:无返 ...
- 使用Java+MySQL+Apache开发后台项目(一)
做前端开发的人越来越多,后端维护的人才越来越稀缺,这种趋势正在慢慢扩展.像我这种人总喜欢反其道而行之,做后端开发的人虽然减少了,但是工作量和工作资质都要求的更高了,随着人工智能的发展,需要后台处理的数 ...
- 基于PHP的颜色生成器
<?php function randomColor() { $str = '#'; for($i = 0 ; $i < 6 ; $i++) { ...
- puppet 横向扩展(一)
目录 1. 概述 2. 实验环境 3. 实验步骤 3.1. 创建puppetmaster的rack环境 3.2. 配置文件设置 3.3. 补充说明 3.4. 测试配置结果 3.4.1. 默认的负载均衡 ...
- MATLAB与C语言对比实例:随机数生成
MATLAB与C语言对比实例:随机数生成 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.整型随机数生成函数 1.C语言程序 int intrand ...
- Java面试知识点之线程篇(一)
前言:在Java面试中,一定会遇到线程相关问题,因此笔者在这里总结Java中有关线程方面知识点,多数从网上得来(文中会贴出主要参考链接),有些也是笔者在面试中所遇到的问题,如有错误,请不吝指正.主要参 ...
- 经常在比特币中看到的merkle树是什么?
区块基础-merkle树 Merkle tree中文叫做梅克尔树,这当然不是一棵真正的植物树,merkle tree是计算机数据结构中的一种树,是由计算机科学家 Ralph Merkle 提出的, ...
- ASP.Net在64位环境开发部署常见问题
越来越多的开发团队開始使用64位操作系统作为开发环境,也计划将应用部署在安装有64位操作系统的server上.对于ASP.Net开发人员来说.使用64位环境开发部署须要注意下面几个问题.可在项目过程中 ...