vue:ali 阿里矢量图库 ico
https://www.sojson.com/image2base64.html 矢量图片base64转换
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code 阿里矢量库(Symbol)
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
兼容性较差,支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般,还不如png。
使用步骤如下:第一步:拷贝项目下面生成的symbol代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>
https://blog.csdn.net/CSDN_Lrcx/article/details/105309975 h5页面引入阿里矢量库 H5引入阿里矢量图标(Symbol)
<script type="text/javascript" src="https://at.alicdn.com/t/font_1208944_0qqspuug7rbn.js"></script>
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style><svg class="icon" aria-hidden="true"><use xlink:href="#god-long"></use></svg>
阿里矢量 font-class在线引用
无色彩,单色调
<link href="https://at.alicdn.com/t/font_1208944_0qqspuug7rbn.css" type="text/css" rel="stylesheet"/><i class="god god-long"></i>
https://blog.csdn.net/tang_jian_dong/article/details/83342826 案例 --X
http://www.faviconico.org/ 推荐使用
https://www.iconfont.cn/ 阿里矢量图库
http://www.bitbug.net/ ico制作
Symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>
Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持 IE6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
@font-face {font-family: 'element-icons';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff2') format('woff2'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#element-icons') format('svg');
}
第二步:定义使用 iconfont 的样式
.element-icons {font-family: "element-icons" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="element-icons">3</span>
font-class 引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 兼容性良好,支持 IE8+,及所有现代浏览器。
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="element-icons el-iconxxx"></span>
vue:ali 阿里矢量图库 ico相关推荐
- vue 踩坑笔记 二.vue引入阿里矢量图库的矢量图
文章目录 1. 进入阿里矢量图官网 2.新建项目 3.找到自己需要的矢量图 4.在需要的组件内进行引入 5.在放置矢量图 7.修改html(class中粘贴矢量图代码,一定要加iconfont !!! ...
- vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
- vue识别不了.ico后缀的图片,显示[object Module]
1.vue识别不了.ico后缀的图片,显示[object Module] 报错如下: 2.vue.config.js配置 module.exports = {chainWebpack: config ...
- vue使用阿里云视频点播
vue使用阿里云视频点播--videoId + playauth的方式 一. 上传视频 官方文档https://help.aliyun.com/document_detail/52204.htm?sp ...
- vue使用阿里云矢量图
vue使用阿里云矢量图 在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
- vue调用阿里云无痕验证
vue调用阿里云无痕验证 在调用阿里云无痕验证时有个先决条件需要全局变量先定义才能去加载js set_ALY_config () {var _this = thisreturn new Promise ...
- vue引入/使用阿里矢量图库
找好需要的图标 选择添加至项目 然后单击你需要加入的项目中,点击确定 跳转至个人页面,找到下载至本地 打开你下载值本地的目录,将其解压 将其解压好的文件,放入你需要的文件中 找到css文件,打开将be ...
- SpringBoot+vue 使用阿里云的短信功能发送手机验证码
前言: 小编后端用的是Springboot 前端用的是vue ,小编主要是写后台,前端页面比较简陋,后期还要调优,写的不对处还望多多包涵. 环境: 需要先准备好阿里云的账号和一些必要的参数.详情见我的 ...
- vue使用阿里字体教程(引入外部字体)
阿里iconfont地址:https://www.iconfont.cn/ 1.点击字体库选择字体 2.下载子集 3.在vue项目中src–>assets–>fonts中放入刚下载的两个文 ...
- 微信小程序/vue通过阿里云上传图片
1.首先前端放入获取上传的组件 微信小程序uview组件: https://www.uviewui.com/components/upload.html vue所使用的element组件: https ...
最新文章
- L1-009 N个数求和
- es6 map与set
- 618技术特辑(四)疯狂剁手的同时,电商隐私安全你注意到了吗?
- 不要在构造和析构函数中使用虚函数
- php listen命令,开启队列时,命令行输入php think queue:listen出现乱码
- C#中汉字按照首字拼音排序
- java 表格tr td_table、tr、td表格的行、单元格等属性说明
- Java String类型入门 String str= abc god 中国 java反转每个单词
- 个人Linux学习笔记操作大全
- 什么是多芯光纤?软光纤、集束光纤、紧套光纤是光纤吗?
- 散粒噪声是白噪声吗_散粒噪声
- java制作闪星星_Silverlight之我见——制作星星闪烁动画
- (java桌面应用程序)淘金者游戏及玩法介绍
- threejs 绘制球体_实战:用 threejs 创建一个地球
- 手机上安装FTP客户端软件(AndFTP),实现通过手机访问计算机FTP服务器
- linux的iso镜像文件下载速度慢的问题
- 手机地图渲染的方式讨论
- 【实战系列】B360主板+Intel 8代i5 8400 CPU+核显完美重装WIN7系统
- md开源云笔记php,开源在线云笔记 ManGe-Notes
- QCustomPlot使用心得六:框选放大,拖动,选中数据
热门文章
- 传说中的世界500强面试题-推理能力(2)
- MySQL for Excel的安装教程
- 网管警惕:能突破网关限制的七大软件(转)
- java中的前加加 和 后加加
- python梦幻西游辅助_GitHub - woshiliushan/mhxy_fz: 一个基于计算机视觉开发的梦幻西游辅助脚本...
- 9、【易混淆概念集】-第五章 2 WBS 需求文件 VS 需求跟踪矩阵 确认范围 VS 控制质量 确认范围 VS 控制范围
- 精彩收集的303个透明flash代码
- 汇通达网络IPO取发行区间下限定价,多家投资方将出现账面亏损
- 身份证号码归属地数据库 身份证具体信息查询服务
- [原创]浅析汇编之堆栈平衡