经过 font-awesome 案例来学习 css sprite 和 svg sprite

问题：font-awesome里面的小图标是怎么产生的？

1. 打开浏览器调试工具，发现font-awesome user这个小图标，其css样式是.

   icon-user:before {
     content: "\f007";
   }
   [class^="icon-"]:before, [class*=" icon-"]:before {
     text-decoration: inherit;
     display: inline-block;
     speak: none;
   }

2. 根据css文件路径，咱们打开font-awesome.css发现它是引用了css3 @font-face这个属性。

   @font-face {
     font-family: 'FontAwesome';
     src: url('../font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
     font-weight: normal;
     font-style: normal;
   }

3. 咱们顺着src：url（）找到其图标svg

   其路径为url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   咱们用sublime打开路径下的svg图,因为SVG是 XML 格式，所以能够支持一般用 XML 工具和库进行的转换和生成。具体的教程连接：XML 问题: 使用 SVG 编程

   <glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

4. 发现content：'\f007'对应的就是上文的unicode=“&#xfoo7”。

写到这里你们也许有点清晰了font-awesome里的图标是怎么来的，不过仍是有点稀里糊涂的，必定有不少问题会问：

svg图是什么？ 怎么生成的？

把全部的图标都作成一张svg图片意义何在？它和css sprite有什么区别呢？

哈哈，其实我和你们也同样，很好奇，因而查看了不少文档。原来早已经有大神研究过了。我会一一放上连接的，这里我先谈一下个人几点认识

css-sprite

1. 先说什么是css sprite？

css sprite又叫css精灵或css雪碧图，是一种背景图片的拼合技术。使用css雪碧图，可以减小页面的请求数、这个很关键，由于每个http请求都是长链接，咱们都知道http开销是很大的，像一些购物网站，若是那么多图标都是标签引入的，那后果不堪设想。css-sprite的设计就是提高页面访问速度和网站请求资源开销的。

2. css-sprite实现的原理

css-sprite经过background-position这个css3新增属性来实现.咱们能够一次性引入图片文件，经过设置background-size来切割小图标，而后经过css-position来给具体的小图标icon定位

3. 如何制做css-sprite

1.慕课网上有远人老师的视频，教你如何作一个css-sprite。传送门：CSS Sprite雪碧图应用
2.windows开发者能够直接百度css-sprite制做工具，工具不少。
3.用sass编译的同窗能够直接使用compass自动合并css雪碧图，教程连接地址
4.能够用ps和AI人工拼图

css-sprite缺点：拼图和后期维护的成本比较大。

咱们能够经过

svg sprite

这里由于我了解的不是不少，并且我本人也是根据张鑫旭大神的技术博客学习的，因此直接贴地址：

将来必热：SVG Sprite技术介绍

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

总结：

symbol + use => SVG Sprite。并且在HTML层面，图标使用的代码成本，跟传统的CSS Sprite或者流行的font-face几乎无异，代码简洁，并且很好维护。全部的SVG图标都在一个SVG源上。retina良好，尺寸可任意拉伸，且颜色可控，真乃Web图标的将来之星。