菜單小圖標處理

在作項目的過程當中，或者看技術博客，都會思考，怎麼才能在保證編碼效率的同時，也提升些許用戶體驗或者性能。
關於菜單小圖標的處理問題，目前瞭解的是雪碧圖和自定義圖標。

---

一、雪碧圖
把小圖標合成一張圖，用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。想說既然都自定義圖標了，就把界面中須要用到小圖標的地方，也一併生成了。

事實上，關於這個問題，目前我還沒找到一個讓寄幾滿意的解決方案。。。若是有發現什麼好方法，再來更新。完畢~以前都是記筆記在有道雲上面，筆記記多了就想整理一下，把不少不懂的地方再理理。做爲小白一枚，心塞啊。