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. MySql如何将一个表字段更新到另一个表字段

    今天遇到这样一个需求: 有两张表,一张是专辑表,另一张是专辑下的图片表, 专辑表中有拍摄年\月,两个字段; 图片表中有实际拍摄日期的字段; 因为专辑表中这两个字段是后加入的,因此只能用一条sql语句将 ...

  2. Android零基础入门第81节：Activity数据传递

    在Android开发中,经常要在Activity之间传递数据.前面也学习了Activity和Intent相关基础,接下来一起来学习Activity的数据传递. 一.简介 通过前面的学习知道,Inten ...

  3. EF 里的 join and Group Join

    join ); pageCount = _db.Orders.Count(); return _db.Orders.OrderByDescending(c=>c.ID).Skip(skip).T ...

  4. Python中的参数传递问题

    首先需要说明python中元组,列表,字典的区别. 列表: 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单. 例如:lst = ['arwen',123] 向list中添加项有两种方法:ap ...

  5. MySql 小内存优化

    MySql5.6启动内存近500M,如在小型机内存敏感的环境可能较大,下边配置会减少较多内存,至150M以下. performance_schema = OFF innodb_buffer_pool_ ...

  6. SQL 游标知识整理

    游标声明格: declare 游标名称 cursor (游标关键字) for 游标操作对象(select * from 表名称)游标使用: open 游标名称; fetch first from 游标 ...

  7. Dynamics 365中的事件框架与事件执行管道（Event execution pipeline）

    本文介绍了Microsoft Dynamics 365(以下简称D365)中的两个概念,事件框架(Event Framework)与事件执行管道(Event execution pipeline). ...

  8. PDF Expert for Mac v2.4.22 中文破解版下载 PDF阅读编辑软件

    PDF Expert for Mac v2.4.22 中文破解版下载:http://h5ip.cn/CsRN PDF Expert for Mac, iOS 上最好用的 PDF 编辑器之一,现在终于打 ...

  9. webapi使用autofac

    注意:您的项目中如果使用的是webapi2,此处必须为webapi2而不是webapi,否则在运行时将出现“重写成员“Autofac.Integration.WebApi.AutofacWebApiD ...

  10. 《JavaScript 高级程序设计》读书笔记

    文章目录 第三章 基本语法 第四章 变量.作用域和内存问题 第五章 应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型 第六章 面向对象 ...