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方式的详细步骤

使用步骤

  1. 进入https://www.iconfont.cn/选择一个你喜欢的图标库,将图标加入购物车。

  2. 点击右上角购物车打开购物车
  3. 加入项目,没有就新建一个项目,点击确定,跳转到我的项目

  4. (菜单栏->图标管理->我的项目),点击下载到本地

  5. 把如图js文件移动到项目中

  6. 使用 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的使用的更多相关文章

  1. 微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

    前提 需要安装好 nodejs (略) 用于下载插件 安装插件 npm install mini-program-iconfont-cli --save-dev 初始化配置文件 npx iconfon ...

  2. js动态创建svg与use 使用iconfont symbol

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 关于iconfont symbol引入字体的方式

    1,下载想要使用的图标集合 2,下载的压缩包解压到将要使用的目录下: 3,使用: 4,效果

  4. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  5. iconfont图标symbol引用方式,有的图标不能通过设置color样式来修改颜色的解决办法

    现象:iconfont安装后的图标,是通过symbol引用方式,有的图标不能通过color修改颜色的解决办法,有的又可以. <svg class="icon" aria-hi ...

  6. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  7. Iconfont 矢量图标库的应用

    前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...

  8. iconfont 使用

    阿里巴巴适量图库  http://www.iconfont.cn/ 官方帮助中有非常详细的操作指导 http://www.iconfont.cn/help/detail?spm=a313x.77810 ...

  9. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

随机推荐

  1. EnterpriseLibrary 6.0 AOP 使用问题

    因为EnterPrise Library 6.0改动了模块的功能类不再自动从Unity创建了,也就是引导也不依赖Unity容器组件,需要先使用静态方法注册一下 private static void ...

  2. Spring MVC的工作原理,我们来看看其源码实现

    前言 开心一刻 晚上陪老丈人吃饭,突然手机响了,我手贱按了免提……哥们:快出来喝酒!哥几个都在呢!我:今天不行,我现在陪老丈人吃饭呢.哥们:那你抓紧喝,我三杯白酒,把我岳父放倒了才出来的,你也快点.看 ...

  3. 使用QPainter的drawPixmap()绘制多幅图片 good

    众所周知,使用QLabel的setPixmap()就可以将图片显示出来,做视屏解码后显示也可以如此.但是为何我今天还要费力使用基函数drawPixmap()来做绘图?理由有这么些吧: 1.使用QLab ...

  4. ssh超时时间设置(设置ClientAliveInterval),附SSH超详细参数

    作者: daodaoliang 版本: V 0.0.1 日期: 2016年12月29日 0x00 OpenSSH 简介 OpenSSH是采用SSH协议实现的重要的远程连接工具,它对所有的数据进行加密以 ...

  5. 初探 C# 8 的 Nullable Reference Types

    溫馨提醒:本文提及的 C# 8 新功能雖已通過提案,但不代表將來 C# 8 正式發布時一定會納入.這表示我這篇筆記有可能白寫了,也表示您不必急著瞭解這項新功能的所有細節,可能只要瞄一下底下的「概要」說 ...

  6. 使用sikuli软件进行自动化编程

    因为工作上的需要,某个信息系统不健全,因此仅仅需要一个一个的点击确认,客户端是网页版本的,抓包太复杂了,如何快速的能够自动化操作? 想到了之前学习python的时候,发现了一个基于java的图片编程软 ...

  7. java高级知识

    1. Spring读取配置文件的流程,怎样引入注解? 2. Spring是怎么注入新的java文件的? 3. CAS锁是什么实现机制,在java的哪些包里最常使用?什么情况下会使用CAS锁? 4. 线 ...

  8. 深入理解JVM(一)虚拟机内存

    一 .前言 JVM是什么,我想诸位肯定都清楚. 好吧,我还是简答说一下JVM即Java虚拟机(够简单吧 233333). 虽然说,所有抛开操作系统,讲虚拟机的内容,都是耍流氓.但是,贫僧不修善果,就爱 ...

  9. Java中常用的url签名防篡改方法

    实现方式:Md5(url+key) 的方式进行的. 1.key可以是任意的字符串,然后“客户端”和“服务器端”各自保留一份,千万不能外泄. 2.请求的URL 例如:  name=lxl&age ...

  10. Docker 安装mysql容器数据卷挂载到宿主机

    环境 Centos:7 Docker: 17.05-ce Mysql: 5.7 1. Mysql外部数据和配置文件路径 msyql配置文件路径:/etc/mysql mysql数据卷路径:/var/l ...