菜单小图标处理

在做项目的过程中，或者看技术博客，都会思考，怎么才能在保证编码效率的同时，也提高些许用户体验或者性能。
关于菜单小图标的处理问题，目前了解的是雪碧图和自定义图标。

---

1、雪碧图
把小图标合成一张图，用background-image引用大图的url，再用background-position去定位。例如：

.icon{display: inline-block; width: 25px; height: 25px; background: url('images/sidebar.png') no-repeat; margin: 5px;}
.icon1{background-position: 0 0;}
.icon2{background-position: -40px 0;}
.icon3{background-position: 0 -25px;}
.icon4{background-position: -40px -25px;}

<div>
    <span class="icon icon1"></span>
    <span class="icon icon2"></span>
    <span class="icon icon3"></span>
    <span class="icon icon4"></span>
</div>

图片的合成方式，网上有很多工具，也可以用gulp去合成。讲真，雪碧图我没有在过往的项目中用过。主要是因为图标的大小是固定的，如果大小要改比较麻烦，所以我一直使用的是自定义图标。

---

2、自定义图标

• 去阿里巴巴矢量图标库http://www.iconfont.cn/下载svg格式的图标或者让设计师切图的时候给svg格式的图标（可以用AI去生成）

• 到https://icomoon.io/app/#/select/网站生成图标
  ①导入svg格式的图标

②选择所有图标

③点击右下角Generaate Font F按钮，进入属性设置页面

④自定义图标名称，并下载

⑤解压，并拷贝font文件夹和style.css文件到项目中

⑥就可以在项目中应用了

但是自定义图标也会有问题，比如，如果页面的图标是彩色的，则无法用这种方式，而且我也遇到过图标冲突的问题，在IE8上（其他浏览器没问题），有个图标，不知道为什么显示不出来，发现它的content和bootstrap的一个图标是一样，但是在生成图标的时候把content改了，还是出不来，十分无解，最后那个图标只好用图片。hhhhhh。想说既然都自定义图标了，就把界面中需要用到小图标的地方，也一并生成了。

事实上，关于这个问题，目前我还没找到一个让寄几满意的解决方案。。。如果有发现什么好方法，再来更新。完毕~之前都是记笔记在有道云上面，笔记记多了就想整理一下，把很多不懂的地方再理理。作为小白一枚，心塞啊。