最後更新：2026/10/15
網站上的小圖示到處都是：選單上的購物車、頁尾的電話和信箱、服務區塊的六個小圖、按鈕前面的箭頭。很多店家的做法是裝一個「圖示外掛」，整套幾千個圖示全部載入，只為了用其中五個。這篇講三種放圖示的方法和各自適合的情況，再用一段程式碼解決一個常見需求：選單項目加圖示、加「NEW」徽章、加一行營業時間的小字。
三種放法
第一種是 WordPress 內建的 Dashicons。後台用的那套圖示就是它，三百多個，有購物車、電話、信箱、常見的社群圖示。它本來只在後台載入，前台要用的話加一行程式碼把它載進來就好（下面程式碼的第 1 段）。好處是不用另外下載任何東西，壞處是圖示的風格偏「後台」，而且只有一種線條粗細。
第二種是 Font Awesome。免費版有兩千多個圖示，風格一致，到處都有人用。它的網站提供「Kit」的用法，貼一行程式碼就能用，但那行程式碼會連到它的伺服器，而且免費 Kit 有流量限制；比較好的做法是下載免費版放在自己的網站上（自架），只載入你用的那幾個樣式檔。用法是在 HTML 裡寫 <i class="fa-solid fa-cart-shopping"></i>。
第三種是直接貼 SVG。到圖示網站（Font Awesome、Google 的 Material Symbols、Tabler Icons 都有免費版）找到那個圖示，複製它的 SVG 原始碼，貼在 HTML 裡。不用載入任何字型或樣式檔，圖示跟著文字一起到，顏色用 CSS 的 fill: currentColor 就會跟著文字顏色。這是最快、最乾淨的做法，適合圖示只有幾個的網站；缺點是每個圖示都要貼一段 SVG，圖示多了 HTML 會變長。
怎麼選：只用三五個圖示，貼 SVG；整個網站風格統一要用幾十個，自架 Font Awesome；WordPress 內建的風格剛好合用，Dashicons。無論哪一種，純裝飾的圖示要加 aria-hidden="true"，讀屏軟體才不會念出奇怪的字；圖示本身是按鈕或連結的唯一內容時（例如只有一個購物車圖示的連結），旁邊要放一段視覺上看不到的文字，WordPress 的佈景主題通常有 screen-reader-text 這個類別可以用。
選單項目加圖示、徽章、小字
WordPress 的選單在「外觀 > 選單」管理，每個選單項目展開來，除了名稱和網址，還有兩個很少人用的欄位：「CSS 類別」和「說明」。它們預設是藏起來的，點右上角「顯示選項」勾選「CSS 類別」和「說明」才會出現。下面的程式碼就靠這兩個欄位：給項目加 icon-cart 類別就出現購物車圖示，加 icon-new 就出現「NEW」徽章，說明欄填的字會變成項目下面的一行小字。
完整程式碼
// 第 89 篇：網站圖示；選單項目加圖示和小字
// 1. 前台也載入 WordPress 內建的 Dashicons（後台本來就有）
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('dashicons');
});
// 2. 選單項目的「說明」欄位印成小字（外觀 > 選單 > 顯示選項，勾「說明」才看得到欄位）
add_filter('walker_nav_menu_start_el', function ($html, $item) {
if (!empty($item->description)) {
$html = str_replace('</a>', ' <small class="mimi-menu-note">' . esc_html($item->description) . '</small></a>', $html);
}
return $html;
}, 10, 2);
// 3. 選單項目加了 CSS 類別 icon-cart、icon-phone、icon-new，就會出現對應的圖示或徽章
add_action('wp_head', function () {
?>
<style>
.icon-cart > a::before, .icon-phone > a::before { font-family: dashicons; display: inline-block; vertical-align: middle; margin-right: 4px; line-height: 1; }
.icon-cart > a::before { content: "\f174"; }
.icon-phone > a::before { content: "\f525"; }
.icon-new > a::after { content: "NEW"; font-size: 10px; font-weight: 700; color: #fff; background: #e4572e; border-radius: 999px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.mimi-menu-note { display: block; font-size: 11px; color: #777; font-weight: 400; }
</style>
<?php
});程式碼放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。
三段各做了什麼
第 1 段把 Dashicons 的樣式檔載到前台，一行就好。載了之後，任何地方寫 <span class="dashicons dashicons-cart"></span> 就是一個購物車。
第 2 段處理「說明」欄位。WordPress 預設不會把說明印出來，這段在每個有填說明的選單項目連結裡，加一個 <small> 放說明文字，CSS 讓它換行變成小字。用途像「聯絡我們」下面寫「週一到週五 10:00–18:00」，「預約」下面寫「免費諮詢 30 分鐘」。
第 3 段是 CSS。.icon-cart > a::before 在連結前面插一個 Dashicons 的字元（\f174 是購物車、\f525 是電話，每個圖示的代碼在 Dashicons 的官方頁面查得到）；.icon-new > a::after 在連結後面插一個紅底白字的「NEW」。要換成 Font Awesome 的圖示，把 font-family 改成它的字型名稱、代碼換成它的就好。
測試結果
我們在本機測試站建一個選單，三個項目分別加了 icon-cart、icon-phone 加說明「週一到週五 10:00–18:00」、icon-new，指定為主選單：
- 前台載入了 Dashicons 的樣式檔。
- 「商店」前面出現購物車圖示（字型是 dashicons，內容是
\f174）。 - 「聯絡我們」下面有一行小字「週一到週五 10:00–18:00」，以區塊顯示。
- 「秋季新品」後面出現「NEW」徽章。
圖示是輔助，不是裝飾
圖示的工作是讓人更快看懂：購物車就是買東西、電話就是打電話、NEW 就是新的。一個網站的圖示風格要一致，線條粗細、圓角、大小都一樣，混用兩套圖示比不用更糟。顏色跟著網站的配色走，做法看〈網站配色怎麼選〉；想讓按鈕和圖示有一點動態，看〈CSS 文字動畫與按鈕效果〉。
如果你想要一個圖示、字型、配色都替品牌統一設計過的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，會替你挑一套風格一致的圖示並處理無障礙的細節。MIMI 提供臺北網頁設計服務，臺北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
