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

标签：

如何在页面上放置我们需要的图标，这个问题从我学习前端以来便一直伴随着我，从开始的全部用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.如果有什么简单的方法或者工具请忽略上述步骤，顺便指点我一下，跪谢！

做完这些终于可以在网页上看到图标了，它比起雪碧图的优势在于可以设置图标大小，但是无法设置比例，可以任意改变颜色，而雪碧图只能通过不同的图片来切换。而且文件也不大，兼容性也好。

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

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

标签：

原文地址：http://www.cnblogs.com/yxyblogs/p/5079223.html