江小鱼

# icon使用

项目中图标有多少格式，一般如何实现

什么是字体图标，为什么要使用字体图标，如何使用字体图标

字体图标和传统图标的区别

字体图标实现方式分哪几类

Sprite 实现图标的原理以及使用图标的三种方式

真是直接灵魂的问题：

静态图片

  • img及HTML<area>技术
  • background-icon
  • icon-Sprites
  • iconfont-HTML
  • iconfont-CSS
  • SVG-icon
  • CSS绘制icon

图片的格式：

  • 位图图片: bmp、jpg、gif、png
  • 矢量图图片: 以svg格式为代表，可缩放矢量图形(Scalable Vector Graphics), svg是一种使用XML格式定义的图像

图标格式：

  • 图标采用图片格式，有bmp、jpg、gif、png等文件格式
  • 缺点：大小改变后，可能会出现锯齿效果，影响美观

# img及HTML<area>技术

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）area 元素总是嵌套在 <map> 标签中。<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。所有主流浏览器都支持 <area> 标签。

一款在线工具Image-Maps我们只需在Image-Maps 上注册一个账号，就能够通过可视化工具对图片进行剪裁，获取裁剪的图片的坐标。

举个🌰

<!-- HTML area技术 -->
<img src="images/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href="#"
        alt="Venus" />
    <area shape="circle" coords="129,161,10" href="#"
        alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href="#" alt="Sun" />
</map>
1
2
3
4
5
6
7
8
9
10

# background-icon （背景图）

这个比较简单而且经常会用到，实用性也挺高的

.icon{
  width: 20px;
  height: 20px;
  /* 背景图 */
  background: url(icon.png) no-repeat;
}
1
2
3
4
5
6

# icon-Sprites （雪碧图）

该技术的全称是: CSS Sprite, 又称为CSS雪碧图(精灵图)，是网页中图片的一中处理方式

原理: 即将网页中所应用的比较小的图片合并为一个大的图片，然后用设置背景图的位置来显示图片

优点: 减少http请求次数，使页面的加载速度更快，提高了网页的性能

缺点: 先设置标签背景图片，再通过精灵图中小图标的宽高和位置，设置对应的div宽高和背景定位坐标（如果手动做的话，痛苦的雅痞！！！）

生成工具: CSS sprites Generator，直接生成 雪碧图生成工具，[雪碧图生成工具

.icon{
  background-image: url("xxx");
  /* 用位置控制显示哪个图 */
  background-position: -100px -200px;
}
1
2
3
4
5

来个图感受下 o(^＠^)o

静态图片

图左上角原点(0,0)到雪碧图的左上角(-100,0)坐标点的X轴和Y轴的值，就是background-position坐标的值(取负值)

静态图片

# iconfont-HTML(unicode引用)

利用HTML中实体名称/实体编号显示图标的原理，添加自定义字体icon

优点：轻量性、灵活性、兼容性好(支持ie6+)，是目前被广泛使用的技术

缺点：大多数的图标字体只能被渲染成单色；需要在html中使用编号，在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能受到font-size、line-height、word-spacing 等 css 属性的影响，而且这种影响调整起来较为困难

阿里巴巴矢量图标库官网，icomoon图标库官网

<!-- 这里直接在html里写的是 unicode -->
<span class="iconfont">&#xe666;</span>
<span class="iconfont">&#xe665;</span>
1
2
3

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

  • 兼容性最好，支持 IE6+，及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

第一步：拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  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#iconfont') format('svg');
}
1
2
3
4
5
6
7
8
9

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
1
2
3
4
5
6
7

第三步：挑选相应图标并获取字体编码，应用于页面

<!-- "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。 -->
<span class="iconfont">&#x33;</span>
1
2

# iconfont-CSS（字体图标，font-class）

图标都采用字体的格式，可以使用color，font-size等改变图标颜色，大小等样式属性

原理和 Unicode 其实是一样的，只不过是在CSS通过伪类的方式将字体显示出来，只是 HTML Unicode 编码中的 &#X 在CSS要换成 \

与 Unicode 使用方式相比，具有如下的特点 :

  • 兼容性良好，支持ie8+
  • 相比于 Unicode 语意明确，书写更直观，可以很容易分辨这个icon是什么；因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的
  • font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">
1

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-qicheqianlian"></span>
1
@font-face {
  font-family: 'iconfont';
  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#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-qicheqianlian-:before {
  content: "\e618";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

静态图片

静态图片

# SVG-icon （symbol-icon）

它的英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图形；用来定义用于网络的基于矢量的图形；用 XML 格式定义图形；图像在放大或改变尺寸的情况下图形质量不会失真；是万维网联盟的标准。

原理: 通过JS在页面中绘制出这个矢量图像(JS中存着如何绘制的方法)

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>
1

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
1
2
3
4
5
6
7
8
9

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
1
2
3

# CSS绘制icon

纯CSS做字体icon

← CSS 动画 →