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. chrome 里面js提示Provisional headers are shown错误

    参考:http://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debug ...

  2. JS解析Json 数据并跳转到一个新页面，取消A 标签跳转

    JS解析Json 数据并跳转到一个新页面,代码如下 $.getJSON("http://api.cn.abb.com/common/api/staff/employee/" + o ...

  3. [Game-0001] 新手引导逻辑梳理

    欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingyang 欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/li ...

  4. 《C++ Primer》读书笔记 第二章

    1.在算数表达式中最好不要使用char或bool,只有在存放字符或布尔值时才使用他们,因为char在有些机器上是有符号的,在一些机器上是无符号的,所以特别容易出问题,如果只表示一个不大的整数,那么明确 ...

  5. Nginx多种负载均衡策略搭建

    背景介绍 上篇介绍了利用Nginx反向代理实现负载均衡,本文详细讲述Nginx下的几种负载均衡策略. 轮询 轮询,顾名思义,就是轮流请求,基于上篇文章的介绍,我们将负载均衡策略聚焦于default.c ...

  6. uint16，uint32是什么？

    记得之前在刷笔试题的时候就看见过这个问题,发现当时上网百度后又忘了. 最近在看CryEngine3引擎代码的时候又晕了,趁现在赶紧记下来~ 在查看CE3的代码时我发现了这个变量,TFlowNodeId ...

  7. Consul&Nginx&Registrator&ConsulTemplate部署高可用负载均衡

    1. Consul Server 创建consul server虚拟主机 docker-machine create consul 出现如下内容即创建成功 Running pre-create che ...

  8. Windows 命令行文本操作

    Windows下文件操作,大部分的时候用的都是用Windows 资源管理器(就是双击 “我的电脑” 的时候看到的图形界面). 接下来,以Windows命令行下操作文本为例,看看命令行在操作文件方面有多 ...

  9. 【HDU - 2181】哈密顿绕行世界问题（dfs+回溯）

    -->哈密顿绕行世界问题 Descriptions: 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市.  Input 前2 ...

  10. php使用webservice调用C#服务端/调用PHP服务端

    由于公司业务需要,用自产平台对接某大厂MES系统,大厂提出使用webservice来互通,一脸懵逼啊,一直没有使用过php的webservice的我,瞬间打开手册开始阅读,最终爬过无数坑之后,总结出如 ...