菜单小图标处理

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

---

一、雪碧图
把小图标合成一张图，用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去合成。讲真，雪碧图我没有在过往的项目中用过。主要是由于图标的大小是固定的，若是大小要改比较麻烦，因此我一直使用的是自定义图标。

---

二、自定义图标

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

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

②选择全部图标

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

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

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

⑥就能够在项目中应用了

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

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