網頁 Menu 增加 Icon 圖片的方法

設計網頁的 Menu 通常都是使用 <ul><li> 標籤來達成最方便，不需要太多的 Coding.

連結的部份就是用 <a> 來達成，不過影像的部份如果使用 <img> 標籤，會造成無法控制影像及超連結文字的對齊，畫面就會醜醜的。(如下圖，Sample)

 

所以要使用圖片，得利用 CSS 定義 <a> 的背景圖

background:url(圖片路徑檔名); background-repeat: no-repeat; background-size: Npx Mpx;            // 指定圖片縮放寬高，如果你的影像圖檔大小已經先處理好，這就可以省略 background-position:0px center;  // 0px 指圖片起始水平位置，center 指圖片與文字垂直對齊 padding-left: 20px;                           // 調整文字與圖片距離(含圖片寬度)

結果如下圖，Sample

最好還是事先把圖檔大小處理好，會比較省事，而且也節省傳輸頻寬，就算考慮到縮放，圖檔也不需要太大，因為 Menu Icon 本身不會需要太大。