在經營 Google Blogger 或進行網頁排版時，我們常會希望在清單（List）前面加上「打勾 ✔」或是「箭頭 ➤」來增加視覺豐富度。
很多人的直覺做法是：直接去 Google 搜尋這些符號，複製，然後貼進 CSS 的 content 屬性裡。結果在預覽時看起來正常，但一儲存或切換 HTML 模式後，圖示就變成了亂碼（例如 或 □），甚至直接消失。
這篇文章將告訴你為什麼「直接貼上 Unicode」在 Blogger 不適用，以及如何使用 FontAwesome 完美解決這個問題。
❌ 常見的錯誤做法：直接貼上符號
許多初學者會在 CSS 中直接貼上符號，如下所示：
/* ❌ 錯誤示範：直接貼上符號 */
li::before {
content: "✔"; /* 這種寫法在 Blogger 編輯器中極不穩定 */
/* 存檔後容易變成亂碼，或在不同裝置顯示為方框 */
}
💡 為什麼 Unicode 符號會失效？
在 CSS 的 ::before 或 ::after 偽元素中使用 content 屬性時，理論上是可以直接接受 Unicode 字元的。但在 Blogger 環境中會失效，主要有兩個關鍵轉折：
- 1. 編碼衝突 (Encoding Issue)：Google Blogger 的後台編輯器在儲存檔案或切換「撰寫模式/HTML模式」時，會重新編碼你的內容。特殊的 Unicode 符號很容易在這個過程中被轉換成無效的字元編碼。
- 2. 字體支援度 (Font Support)：你電腦上看得到的「✔」，是因為你的系統字體（如微軟正黑體）支援這個符號。但讀者的手機或電腦如果沒有安裝相同字體，看到的可能就是一個「豆腐塊（方框）」。
✅ 正確解法：使用 FontAwesome + Escaped Unicode
要解決這個問題，我們不能依賴「字元本身」，而是要依賴「代碼」。FontAwesome 是一套將圖示做成字型的工具，它保證了所有人在任何裝置上看到的圖示都是一樣的。
步驟一：確認 Blogger 已安裝 FontAwesome
現在多數的 Blogger 第三方模板（如 Sora Templates）都已內建 FontAwesome。如果不確定，可以檢查網頁原始碼。
步驟二：找到圖示的 Unicode 代碼
去 FontAwesome 官網搜尋你要的圖示，例如：
● 打勾 (Check)：f00c
● 箭頭 (Arrow)：f0da
步驟三：在 CSS 中正確撰寫 (關鍵！)
這是最重要的一步。你不能直接寫 f00c，也不能貼圖示。你必須使用 CSS 轉義序列 (CSS Escape Sequence)，也就是在代碼前加上 反斜線 \。
/* ✅ 正確示範：使用轉義代碼 (Escape Sequence) */
li::before {
content: "\f00c"; /* 這是打勾圖示的代碼，記得前面要加反斜線 */
font-family: FontAwesome; /* 必須指定字體庫，否則只會顯示方框 */
/* 其他美化樣式 */
color: #27ae60;
margin-right: 5px;
}
為什麼這樣就不會跑掉？
因為 \f00c 對瀏覽器和編輯器來說，就只是普通的 純文字 (ASCII)。Blogger 的編輯器看不懂這是圖示，所以不會去「雞婆」幫你重新編碼或轉換，等到網頁載入時，瀏覽器看到 \ 開頭，才會去 FontAwesome 字型檔裡抓出對應的圖示顯示。
⚠️ 常見錯誤排除 (Troubleshooting)
如果你用了代碼 \f00c 卻出現一個「方框」或顯示不出來，通常是以下兩個原因：
- 忘記宣告 font-family：CSS 不知道這個代碼屬於哪種字體。舊版 FontAwesome (v4) 需加上
font-family: FontAwesome;。 - 反斜線 \ 被吃掉了：有時候在 Blogger 範本 HTML (Template HTML) 直接編輯時，一個反斜線會被解析掉。如果你發現 CSS 變成
content: "f00c"(沒有斜線)，圖示就會變成文字 "f00c"。此時你需要寫兩個反斜線content: "\\f00c";。
📝 總結範例代碼
想在文章清單做出漂亮的打勾效果，請直接複製這段 CSS 到你的 Blogger 文章 HTML 內：
<style>
/* 定義清單樣式 */
ul.my-check-list {
list-style: none; /* 移除原本的黑點 */
padding-left: 0;
}
ul.my-check-list li {
position: relative;
padding-left: 25px; /* 預留空間給圖示 */
margin-bottom: 10px;
}
/* 使用 ::before 偽元素加入圖示 */
ul.my-check-list li::before {
content: "\f00c"; /* FontAwesome 打勾代碼 */
font-family: FontAwesome; /* 指定字庫 */
position: absolute;
left: 0;
top: 2px;
color: #27ae60; /* 綠色 */
font-weight: bold;
}
</style>
<ul class="my-check-list">
<li>第一點優勢：不會被 Blogger 編輯器吃字</li>
<li>第二點優勢：手機電腦顯示一致</li>
<li>第三點優勢：顏色大小隨意調整</li>
</ul>
掌握了 Unicode Escape (\xxxx) 這個技巧，你就再也不用擔心辛苦排好的 Blogger 版面，因為一個小小的符號而崩壞了！
為什麼你的圖示會變成亂碼？FontAwesome 在 Google Blogger 的正確使用姿勢（CSS篇）){kind=link}
0 留言