iconfontのsymbol的使用
iconfont三种方式的优缺点
unicode
优点：
1.兼容性最好，支持ie6+
2.支持按字体的方式去动态调整图标大小，颜色等等
缺点：
1.不支持多色图标
2.在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
3.不直观，看unicode码很难分辨什么图标
fontclass
1.兼容性良好，支持ie8+
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
symbol
1.支持多色图标了，不再受单色限制
2.支持像字体那样通过font-size,color来调整样式。
3.支持 ie9+
4.可利用CSS实现动画
5.减少HTTP请求
6.矢量，缩放不失真
7.可以很精细的控制SVG图标的每一部分
下面是使用symbol方式的详细步骤
使用步骤
- 进入https://www.iconfont.cn/选择一个你喜欢的图标库，将图标加入购物车。
- 点击右上角购物车打开购物车
- 加入项目，没有就新建一个项目，点击确定，跳转到我的项目
- （菜单栏->图标管理->我的项目）,点击下载到本地
- 把如图js文件移动到项目中
- 使用 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>icon</title>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-food-macaron"></use>
</svg>
<script src="./icon/iconfont.js"></script>
</body>
</html>
注意xlink:href的值前面带有
#，在我的项目中，每个图标对应一个id。
补充
快速将多个图标添加到购物车，控制台输入如下代码执行
var icon=document.getElementsByClassName('icon-gouwuche1');
for(var i=0;i<icon.length;i++){
icon[i].click();
}
iconfontのsymbol的使用的更多相关文章
- 微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)
前提 需要安装好 nodejs (略) 用于下载插件 安装插件 npm install mini-program-iconfont-cli --save-dev 初始化配置文件 npx iconfon ...
- js动态创建svg与use 使用iconfont symbol
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于iconfont symbol引入字体的方式
1,下载想要使用的图标集合 2,下载的压缩包解压到将要使用的目录下: 3,使用: 4,效果
- 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法
现象:iconfont安装后的图标,是通过symbol引用方式,有的图标不能通过color修改颜色的解决办法,有的又可以. <svg class="icon" aria-hi ...
- icon-font与svg
icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...
- Iconfont 矢量图标库的应用
前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...
- iconfont 使用
阿里巴巴适量图库 http://www.iconfont.cn/ 官方帮助中有非常详细的操作指导 http://www.iconfont.cn/help/detail?spm=a313x.77810 ...
- 关于iconfont字体图标的使用
今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...
随机推荐
- storm（二）消息的可靠处理
storm 通过 trident保证了对消息提供不同的级别.beast effort,at least once, exactly once. 一个tuple 从spout流出,可能会导致大量的tup ...
- Android零基础入门第85节：Fragment使用起来非常简单
Fragment创建完成后并不能单独使用,还需要将Fragment加载到Activity中,在Activity中添加Fragment的方式有两种:静态加载和动态加载,接下来分别进行学习. 一.静态加载 ...
- 从Qt5开始只剩下setCodecForLocale这一个了，只是影响Qt对toLocal8Bit相关函数的编码方式（在源码里写非英文，官方推荐“\xE4\xBD...”这种）good
QTextCodec::setCodecForCStrings(QTextCodec::codecForName("UTF-8")); QTextCodec::setCodecFo ...
- 比较DirectX和OpenGL的区别（比较详细）
OpenGL是个专业的3D程序接口,是一个功能强大,调用方便的底层3D图形库.OpenGL的前身是SGI公司为其图形工作站开发的IRIS GL.IRIS GL是一个工业标准的3D图形软件接口,功能虽然 ...
- 剖析Qt的事件机制原理（源代码级别）
在用Qt写Gui程序的时候,在main函数里面最后依据都是app.exec();很多书上对这句的解释是,使Qt程序进入消息循环.下面我们就到exec()函数内部,来看一下他的实现原理.Let's go ...
- Java代码消除switch/case,if/else语句的几种实现方式
转自:https://my.oschina.net/stefanzhlg/blog/372413 我们在平时的编码中,我们经常会遇到这样的情况: 使用过多的switch/case 或者 if else ...
- 如何在 cmd 命令行中查看、修改、删除与添加环境变量
Windows 和 linux 区别 一.查看所有环境变量的名称和值:Linux下:exportWindows下:set二.根据名称查该环境变量的值:Linux下:echo $环境变量名比如:echo ...
- java设计模式-原型（prototype）
有时候创建对象是需要耗费很多资源,但是每个对象之间又有大量的重复.我们可以选择在创建好一个对象后,以之作为模板克隆出其他对象,稍作修改,即可用于其他地方. 需要实现Cloneable接口,重写clon ...
- Tido 习题-二叉树-最高分
题目描述 老师想知道从某某同学到某某同学当中,分数最高的是多少.现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入 输入包含多组测试数据.每组输入第一行是两个正整数N和M(0& ...
- SpringBoot从入门到精通一(idea优雅搭建SpringBoot项目)
前言 在没有SpringBoot之前,我们搭建的是SSM(SpingMVC+Spring+Mybatis)项目,在搭建SSM项目的时候,我们要经过一系列的繁琐配置,例如:application,web ...