icon 的各种实现方式
a.使用 image 实现
注意事项：
- img 的大小设置
可以只设置宽度／高度，图片会自适应缩放 - img 的 vertical-align
- 请求数过多
因为每一个请求都是需要花时间去建立的，HTTP 1.1 时代，客户端（浏览器）是慢的，但如果升级到了 HTTP 2，100个请求跟1个请求是差不了多少的
在服务器端（server），比如是用 php、java 实现的后端，请求过多，一般会导致线程过多，或大或小都会产生一定的压力
另外，请求过多，对网站流量也会有一定的影响，流量要要花钱
b.CSS Sprite（css精灵/雪碧）
指将不同的图片/图标合并在一张图上，在使用时只显示出所需要的该图片的一部分，并且所有图片的引用链接都是一样的，从而能够减少向请求，提高网页加载性能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.icon{
/*border:1px solid red;*/
width: 20px;
height: 20px;
background-image:
url("http://ww1.sinaimg.cn/large/006JM2pKgy1fp3942tx3lj301800m0j9.jpg") ;
background-repeat: no-repeat;
display: block;
}
.phone{
background-position: -22px 0;
}
.time{
background-position: 0px 0px;
}
</style>
</head>
<body>
<span class=" icon phone"></span>
<span class=" icon time"></span>
</body>
4.png
使用方法：
- 现在可以使用命令行：
- google：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它* 安装完成后，比如使用命令
sprity create build resource/*.png -s style.css。这里意思是将 resource 目录下的 png 格式图片生成 scripts 以及 名为style.css的文件，并放在 build 目录下。这样我们就可以在代码中直接引用了，直接加上对应的 icon 类名即可
- 使用在线工具：CSS Sprites Generator
- 缺点：
无法缩放
不好修改
c.Icon Font 把字体做成图标
1.先设计新的字体:
可以通过 iconfont 来制作
2.形成字体文件（.eot、.ttf等供各种浏览器识别的字体文件）
3.利用无意义的unicode码与各个字体做好对应关系再定义类名形成CSS文件
4.利用线上或是本地链接方式，调用已定义好的该字体样式
<style>
@font-face {
font-family: 'pengronghui'; /* project id 581087 */
src: url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.eot');
src: url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.woff') format('woff'),
url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.ttf') format('truetype'),
url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.svg#iconfont') format('svg');
}
p,h1{
font-family:pengronghui;
font-size:40px;
color:red;
text-shadow:1px 1px 4px rgba(255,0,0,0.4);
}
</style>
</head>
<body>
<p></p>
<h1></h1>
</body>
</html>
6.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_581087_qb1kd9gpf7x03sor.css">
</head>
<body>
<span class="iconfont icon-moon"></span>
<span class="iconfont icon-rain"></span>
</body>
</html>
8.png
c.SVG(推荐方法)
- svg 可以作为图像的地址直接传入：
<\img src="svg">，但是这样依然会造成请求数过多* - 但是可以使用 SVG "sprites"；
svg-sprite
优点：
1.它是以标签的形式来组织所有的图片的（移动端首选 ）
2.可以方便的修改 icon 的大小、颜色，缩放没有锯齿
d. 用 CSS 画icon(不推荐使用)
要了解可参考：CSS ICON
