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 项目中添加阿里巴巴矢量图的更多相关文章

  1. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  2. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  3. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  6. 在vue项目中添加特殊字体

    这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...

  7. vue项目中添加百度地图功能及解决遇到的问题详解

    第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...

  8. vue项目中添加单元测试

    从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...

  9. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

随机推荐

  1. Chrome Inspect不显示Webview页面的问题总结

    首先,确保手机打开了USB调试.如果还是检测不到WebView页面,主要有以下几种情况. 1.反应慢,稍等一会 2.关闭然后重新打开USB调试开关,刺激一下chrome,我的魅族手机有时需要这样操作一 ...

  2. codeforces 803D Magazine Ad(二分+贪心)

    Magazine Ad 题目链接:http://codeforces.com/contest/803/problem/D ——每天在线,欢迎留言谈论. 题目大意: 给你一个数字k,和一行字符 例: g ...

  3. 【软件需求工程与建模 - 小组项目】第6周 - 成果展示3 - 软件设计规格说明书V4.1

    成果展示3 - 软件设计规格说明书V4.1

  4. Android/IOS手机使用Fiddler抓包

    对于Android和IOS开发及测试的同事来说抓包是一个很重要的事,有利于排查问题所在,快速定位问题.但长期以来一直没有一款可以快速抓包的工具,直到有了Fiddler2. 使用步骤: 1.  Fidd ...

  5. chmod命令-权限

    ---··[转] hmod命令:改变文件权限.         一:符号模式:     命令格式:chmod [who] operator [permission] filename who包含的选项 ...

  6. SQL Server 锁机制

    锁兼容性图: 一.锁的粒度: 比较需要注意的是RID/KEY.HoBT/PAGE这两对儿的区别,RID和HoBT是针对堆表的,即没有聚集索引的表. 二.锁的模式: 1.关于其中的S.U.X锁: 共享锁 ...

  7. App分享之微信微博等各个社交平台的分享授权规则和常见问题

    一.新浪微博分享规则 新浪微博支持分享类型: 应用内分享也就是网页分享支持: 文字,文字+图片,要分享链接需要链接添加在text里分享 客户端分享支持:文字,图片,文字+图片,图片+文字+链接 参数说 ...

  8. DNS区域传送漏洞实验以及二级域名爆破

    DNS区域传送漏洞实验以及二级域名爆破 目录: 1.DNS服务器的域传送漏洞(nslookup交互式.非交互式.批处理三种方式) 2.写个二级域名爆破脚本 一.DNS服务器的域传送漏洞 实验环境: 服 ...

  9. MySql基本使用方法

    一,基本概念 1, 常用的两种引擎:         (1) InnoDB        a,支持ACID,简单地说就是支持事务完整性.一致性:         b,支持行锁,以及类似ORACLE的一 ...

  10. MYSQL基本操作(上)

    很久之前,就想做个Mysql的小结,毕竟数据库知识是软件研发的基本技能,这里话不多说,开始总结一波. 数据库基本概念 数据库为高效的存储和处理数据的介质(主要分为磁盘和内存两种),一般关系型数据库存储 ...