為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

前陣子接到一個需求，希望在所有 UL LI 項目(列表)清單之前，插入一個小圖示。而且這個圖示，需要將來可以很方便地自行替換。

假如網頁的 UL LI 項目早已做好，那麼一個個手動加入 IMG 標籤的圖片，不但很麻煩，日後也不方便維護(更換圖示)。

其實這件事使用 CSS 技巧就能很簡單完成，一次可替 UL LI 所有項目清單增加、或是更換圖示。本篇將介紹三個解決方案，每個都很方便操作、值得參考，不過建議讀者先有一些基本的 CSS 概念再來練習。

(圖片出處: pixabay.com)

一、CSS CONTENT 屬性

這件事最早的 CSS 技巧是使用 Background 屬性來設定背景圖案，不過稍微有點麻煩，需要調整圖片的尺寸、位置，以及設定文字與圖示的距離，有很多參數要細調。

現在 IE 舊版瀏覽器終於淘汰地差不多了，一些 CSS 新屬性終於可以放心拿出來用。只要使用「content + 偽類」就能輕鬆做到這個效果。

1. 使用前

這是一段 UL LI 清單的範例語法：

<ul class="css3_content">
<li><a href="http://www.wfublog.com/2014/08/web-chinese-font-choice.html" target="_blank">網頁中文字型除了微軟正黑體, 還有這些好選擇！</a></li>
<li><a href="http://www.wfublog.com/2016/04/google-drive-disable-direct-link.html" target="_blank">Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備</a></li>
<li><a href="http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html" target="_blank">分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊</a></li>
<li><a href="http://www.wfublog.com/2015/11/win8-win10-ctrl-space-language-switch.html" target="_blank">讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入</a></li>
<li><a href="http://www.wfublog.com/2016/04/owl-carousel-jquery-slider-cdn.html" target="_blank">最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包</a></li>
</ul>


原始效果大致如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

2. 使用後

現在網頁加入以下的 CSS 參數：

.css3_content li {
list-style-type: none;
}
.css3_content li:before {
content: url("http://www.wfublog.com/favicon.ico");
vertical-align: middle;
margin-right: 5px;
}
藍色圖片網址可改為自訂圖示網址，使用此 CSS 參數的效果如下，清單項目之前可出現自訂圖案：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

3. list-style-image

OL、UL 等清單標籤，另外有個參數 list-style-image 可更簡單的完成此事，語法教學可參考「CSS list-style-image」。

以上先使用「content + 偽類」來介紹，是因為泛用性更高，這個技巧不限於 OL、UL 等清單標籤，其他 HTML 標籤也適用，因此這個技巧比較實用。

而且接下來要介紹的方案，也都是「content + 偽類」的應用，效果更佳，因此目前為止的內容就當作暖身之用。

二、使用 Unicode 當作圖示

使用圖檔需要花費 HTTP 請求、等待網路傳輸，如果需要的圖案可以從 Unicode 字型之中找到，那麼網頁效能會稍微好一點。

可從這篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，找到需要的圖案後，記下 CSS 這個欄位的字串內容。

1. 使用前

可參照「一、CSS CONTENT 屬性」→「1. 使用前」的範例語法，但是將 class="css3_content" 改為 class="unicode_list_image"。


2. 使用後

假設選擇的 Unicode 圖示為「照相機(camera) 」，查到的 CSS 字串為「\1F4F7」，請在網頁加入以下 CSS 參數：

.unicode_list_image li {
list-style-type: none;
}
.unicode_list_image li:before {
content: "\1F4F7";
margin-right: 5px;
}
紅色字串就是照相機 Unicode 圖示對應的字串，使用以上 CSS 參數的效果如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

3. 注意事項

由於不同的瀏覽器、作業系統，對 Unicode 的支援度都不一樣，為了能讓訪客都看得到選擇的 Unicode 圖案，最好從這個網頁「Emoji Unicode Tables」來挑選圖案。

看最左邊那一欄的圖案，如果可以顯示，則該圖案在大部分作業系統、瀏覽器都能顯示。如果不能顯示(出現方塊)，代表這個圖案比較新，不一定能在大部分作業系統顯示。

三、Font Awesome

為了解決 Unicode 作業系統支援度的問題，使用 Font Awesome 這套圖示字型會是更好的解決方案。現在 WFU BLOG 已將整個網站的所有小圖示，改用 Font Awesome 顯示，使用教學可參考「圖示字型 Font Awesome 進階使用方式教學」。

熟悉使用方法後，可從這篇整理的「使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩」，找到需要的圖案後，記下 CSS 這個欄位的字串內容。


1. 使用前

可參照「一、CSS CONTENT 屬性」→「1. 使用前」的範例語法，但是將 class="css3_content" 改為 class="fontawesome_list_image"。


2. 使用後

假設選擇的 Font Awesome 圖示為「照相機(camera) 」，查到的 CSS 字串為「\f030」，請在網頁加入以下 CSS 參數：

.fontawesome_list_image li {
list-style-type: none;
}
.fontawesome_list_image li:before {
content: "\f030";
font-family: fontAwesome;
margin-right: 5px;
}
紅色字串就是照相機 Font Awesome 圖示對應的字串，使用以上 CSS 參數的效果如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

3. 縮排效果

2017.6.2 增補：本文以上的範例，並沒有 UL LI 原本的文字縮排效果，也就是新增的圖示會被視為內容的一部份。

如果想把圖示跟文字段落分離，讓文字保有縮排效果，可參考這個頁面的程式碼範例「FontAwesome List Item Bullets」，摘錄範例程式碼如下：

.fontawesome_list_image li {
list-style-type: none;
margin-left: 2em;
}
.fontawesome_list_image li:before {
content: "\f030";
font-family: "FontAwesome";
float: left;
margin-left: -1em;
}

四、總結

本篇的三個方案各有優點，雖然 WFU 偏好 Font Awesome，但不代表其他兩者沒有優點，大致做個總結：

• 使用圖片：好處是不需查表，可以使用彩色圖片(另外兩個只能上一種顏色)。
• 使用 Unicode：使用作業系統現有的 Unicode 圖示，節省網頁 Http 傳輸(不需載入圖片、不需載入 Font Awesome 這樣的外部字型)。
• 使用 Font Awesome：沒有 Unicode 跨作業系統支援度的問題，圖案選擇性很多。

讀者可根據以上歸納，來選擇符合需求的對應方案。

更多 CSS 相關技巧：

更多字型相關文章：