前端菜鸡之路——网页上的图标

如何在页面上放置我们需要的图标，这个问题从我学习前端以来便一直伴随着我，从开始的全部用img标签来放图标到之后的用雪碧图，用字体，但是再多的方法也要懂得如何在不同的情形下去使用这些方法。所以刚在加班中过完圣诞的我坐在了电脑前，想要对这些熟悉而又陌生的东西进行整理和总结。

首先是从img标签说起，当我第一次切图时便和它邂逅，当时觉得好神奇，给它一个路径居然可以找到我想要的图片，并且展示出来，功能有点类似于快递员，于是我开始频繁的收各种快递，用到图片的地方都选择使用它。虽然这么做并不算错，但很显然不是任何时候都可以用的，也有一些问题需要注意，一个img标签就代表了一个请求，而当网页上存在大量的图标时，请求数也随之提升，但是浏览器的并发请求数是有限制的，请求当然是越少越好，这也是网站优化时需要重点解决的问题，尤其是对于类似淘宝那样的网站，图标数量巨大，大量使用img标签是不可能的。

这时，就需要用到雪碧图，他的原理十分简单，把很多个图标放在一起，做成一张图片，然后通过CSS的background-image和background-position属性控制它的位置，让它显示我们需要的内容，使用时还是需要注意几点：①标签需要指定宽高，因此最好使用块级元素。②由于无法控制图标大小，对于需要自适应的图片不适用。

另外还有就是雪碧图的制作比较繁琐，对于我这样手残的程序猿简直是折磨，幸好像gulp这些工具都有生成雪碧图的插件，而且还会生成CSS样式，但是位置有时候不太合适，调整起来需要点耐心。

最后还有一种方法，就是用font-face，也就是自定义字体，它和雪碧图有些相似的的地方，尤其是制作起来非常麻烦，还没有什么可以用的工具，甚至为了做字体我还专门去下载了一个做字体的软件，过程大概是这个样子：

1.准备工作：字体制作软件，字体文件。

2.用软件打开准备好的字体文件。

3.找到合适的矢量图标，下载下来，放到字体文件当中，可以在软件中查看到图标的编码。

4.保存字体文件，再用网上的字体转换工具得到不同格式的字体文件，通常还会有一个CSS文件，里面有自定义字体的CSS代码，或者也可以自己写。

@font-face {
    font-family: 'emotion';
    src: url('emotion.eot'); /* IE9*/
    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('emotion.woff') format('woff'), /* chrome、firefox */
        url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
 }

5.把上面的CSS代码放入你的CSS文件，然后在需要用到图标的地方引用定义的字体，并且内容用图标的编码代替。

.icon:after, .icon::after{
    font-family:"emotion" Tahoma;
    display:inline-block;
    content:"i";/*在这里调用字符*/
    width:16px;
    height:16px;
    margin-left:-16px;/*position:absolute什么的也可以，看具体情况*/
}

6.最后在浏览器上调整一下就行了。

7.如果有什么简单的方法或者工具请忽略上述步骤，顺便指点我一下，跪谢！

做完这些终于可以在网页上看到图标了，它比起雪碧图的优势在于可以设置图标大小，但是无法设置比例，，可以任意改变颜色，所以个人感觉比较适合用于移动端上的需要自适应图标而雪碧图只能通过不同的图片来切换。而且文件也不大，兼容性也好。

使用场景的话和雪碧图相比，它适合用于纯色的矢量图，维护起来非常麻烦，有可能需要改动的地方最好别用，还有如果项目赶时间就算了，用雪碧图吧。