2016年9月14日

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

A+
前陣子接到一個需求,希望在所有 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>


原始效果大致如下:


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 參數的效果如下,清單項目之前可出現自訂圖案:


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 參數的效果如下:


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 參數的效果如下:



四、總結


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

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

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



更多 CSS 相關技巧:


更多字型相關文章:

2 則留言:

  1. WFU你的網誌,底部,三列,
    “站務相關”“社群相關”“網站資訊”,
    這3個UL/LI,前面的小圖標,是不是就是用到了本文的CSS技巧?
    有空我再研究下,把底部的UL,也做點美觀修飾工作。

    回覆刪除
    回覆
    1. 網站下方的圖標,可以看到不完全一樣喔,按本篇作法的話,是全部一起套用。

      另外,下面的 CSS 是使用 font-awesome 圖示 + 漸層 + 圓角

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。