最後更新時間：2020 年 12 月 8 日
回想一開始用 WordPress 網站時，想在側邊欄加上個 Icon 都不會，找了很多外掛還是裝得七零八落的，不滿意。
直到後來下定決心去學了 HTML, CSS 後，才開始擺脫用凡事尋求外掛的壞習慣。
最近比較有時間了，決定來記錄一下以前新手時期常常做不到的簡單需求，並且寫成文章，希望能幫助到有跟我一樣困擾的朋友們。
啟用 Font Awesome 服務
首先，我們要先去啟用 Font Awesome 的服務，你可以把 Font Awesome 理解成一個第三方的雲端 Icon 服務，簡單來說就是可以不用下載 Icon 檔案，就直接在網站中使用這些 Icon。
在這邊我們選擇免費版進行就好了，點選畫面中心的 Start for Free 註冊帳號。
註冊完之後，就會跳轉到這個畫面，點選右上角的 ” Copy Kit Code ” 將這串 JavaScript 的程式碼進行複製
到這邊，Font Awesome 的部分就告一段落了，接著，我們要將剛剛複製的這串程式碼放入我們網站 HTML 程式碼中的 <head> 之中。
在網站中安裝 Font Awesome
回到你的 WordPress 後台，然後點選外觀 ->佈景主題編輯器 -> 選取自己的主題 ( 以 Astra 為例 ) -> 選取 header.php
選取 header.php 後，找到</head>，並將剛剛複製的程式碼貼上至它的上方，並按下「更新檔案」
到這邊為止，所有事前的準備工作都已就緒！接下來回到網站前台，我們將開始使用 CSS 選擇器把 Icon 加到側邊攔的標題之前。
利用開發人員工具找出元素
接下來點選滑鼠右鍵，選擇檢查 -> 點選上方的鼠標選擇器 > 點選你想要修改的元素 ( 以側邊欄標題「分類」為例 )，你會發現以下這一段程式碼被反白選取了。
<h2 class="widget-title">分類</h2>上面這一段程式碼代表著這一個元素的 HTML 程式碼，HTML 就有點像是網站的架構，而這一段程式碼主要是告訴我們，「分類」的 class 是 widget-title。
所謂的 class 指的是這個 HTML 元素的一種分類方式，而這個分類的名稱叫做 ” widget-title “，通常工程師在製作網頁時，都會寫成人看得懂的英文，方便閱讀。
但是，只有拿到 class 可能還不夠，因為可能很多元素都有相同的 class，所以如果只有 class，可能有很多元素都會被同時改動到，因此，最好的情況下是拿到 id，因為 id 是唯一的。
往上一行我們可以發現，雖然標題「分類」沒有 id，但是它的上方有一段程式碼是有 id 的：
<aside id="categories-2" class="widget widget_categories">這段程式碼告訴我們，剛剛的分類是被包覆在這個 aside 之下，並且這個 aside 的 id 是 categories-2，於是我們有了 id 也有了 class，代表接下來我們可以很準確的使用 CSS 選擇器選取到我們想要的元素。
接著進到 WordPress 的「自訂」區域 > 點選「附加的 CSS」，為了方便解說，因此在這邊，我先輸入我昨天完成的 CSS 程式碼：
#categories-2 .widget-title::before {
font-family: "Font Awesome 5 pro";
font-weight: 400;
content:"\f07b ";
}
神奇的事情發生了，分類前面出現了一個檔案夾的 Icon，這是怎麼做到的呢？接下來，我們將一步步的拆解原理。
使用 CSS id, class選擇器，正確選取元素
首先，我們要先使用 CSS id, class 選擇器選取到我們要的元素，也就是側邊欄的標題「分類」，分別如下：
- CSS id 選擇器：
#+ 你想選擇的 id - CSS class 選擇器：
.+ 你想選擇的 class
以本篇為例，我們的 id 與 class 選擇器分別為：
#categories-2.widget-title
而如果我們想要選擇的元素同時符合這兩個要件，我們可以將其合併成：
#categories-2 .widget-title
同時使用兩個 CSS 選擇器是一個比較嚴謹的作法，如此一來，便可以正確的選擇到我們想要選擇的元素。
利用 CSS 虛擬元素添增 Font Awesome Icon
回到我們的目標，因為我們想要的是在側邊欄的標題前添增一個 Icon，所以，只選到正確的元素還不夠，還必須針對元素的前方做調整。因此，我們要利用 CSS 一個稱為「虛擬元素 ( Pseudo-elements ) 」( 或稱作偽元素 ) 的特性，將 Icon 放置在剛剛選擇的元素之前。
因此，我們要使用以下 CSS 虛擬元素程式碼：
::before
於是，我們可以在將其合併成：
#categories-2 .widget-title::before
這段CSS 選擇器程式碼告訴我們，今天我們要選的是一個「 id 為 ” categories-2 ” 且 class 為 ” widget-title ” 之前 ( :before ) 的一個虛擬元素」，接著，我們要透過 Font Awesome 的服務，直接使用一段 CSS 程式碼取用雲端 Icon。
這部分可以參考 Font Awesome 的官方文件，在這邊就不做詳細的說明，而文件的大意是，將下方程式碼輸入到你的 CSS 之中即可完成：
font-family: "Font Awesome 5 Pro";font-weight: 400;content: "\f07b";
而 contenet 會依據你填寫不同的代號，而產生出不同的 Icon，這部分會需要透過 Font Awesome 官方提供的對照表進行填寫，想要哪個 Icon 就在 content 之前加上 ” \ “，並填寫相對應的編號即可，例如我在這邊選的是 f07b 這個 icon。
於是，最後我們可以得到前面所填寫的 CSS 程式碼：
#categories-2 .widget-title::before {
font-family: "Font Awesome 5 pro";
font-weight: 400;
content:"\f07b ";
}至於你可能會好奇，為什麼我 content 的後面要加空格呢？這是因為我發現如果不空格的話，Icon 距離文字會有點太近，所以我添增了一些空格去拉遠距離，是一種很土法煉鋼的作法，真的不需要去把程式碼想得太難。
除此之外，我發現 Font Awesome 即使是免費版本也可以使用 Pro 的 Icon，不知道以後會不會改掉，所以雖然我是免費版， font-family 我還是寫 Font Awesome 5 pro ( 但感覺這是一個 Bug，如果之後修正掉了，記得要把 font-family 改回 Font Awesome Free )。
所以，學會了我前面教的東西之後，你也可以依樣畫葫蘆，為所有的側邊欄加上 各自不同的 Icon！
整體評價
Font Awesome
Font Awesome 是一個第三方的雲端 Icon 服務，可以讓網站不需要下載任何 Icon 檔案，就直接在網站中使用這些 Icon。
貨幣: USD
運作系統: Web
應用程式分類: icon
4.9
結語
其實這招還可以應用在很多東西上面，基本上所有的元素你只要選得到，都可以為他們加上 Icon。
雖說這篇文標榜的是不用會程式也可以操作，但可能還是要學過一點 CSS 才會比較好理解，所以如果操作上有問題，都可以留言在下方另外詢問我唷。
額外資訊
我目前正在製作一部 WordPress 網站的線上課程，主要內容會是教你如何從完全不懂程式碼的新手，透過學習架設 WordPress 網站與 SEO，打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話，歡迎填寫下方的訂閱表單，我將會告訴你最新的開課資訊。
加入 FB 討論社團
另外，我開設了一個 Facebook 社團，叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」，社團中討論的主題主要會是關於 WordPress 網站架設、部落格經營、以及網路賺錢。
如果你也對這些內容有興趣的話，歡迎你點擊下方的連結進行加入，我將會在那邊發佈一些這些主題的相關議題與討論，當然，對於 WordPress 有問題的話也可以直接在裡面詢問我唷！
你可能會想看
網路賺錢
部落格經營
基礎教學
- 【2020】Rank Math 完整教學，WordPress 最佳 SEO 外掛
- WordPress 完整介紹教學，新手也能一天內從零架出專業網站
- 毫無疑問最適合架設 WordPress 的主機 – Cloudways 教學
- 如何架設網站？5 分鐘告訴你 3 種市面上最熱門的架站方式！
- WordPress 主題推薦 – Astra 完整介紹與教學，1 款適合所有人的佈景主題
- WordPress 後台操作教學，10 分鐘教會你 6 大必學基本功能
- WordPress 網站主機該如何選擇？4 種常見的主機類型比較，找到最適合你的主機
- 如何不花一毛錢架設 WordPress 網站？Google 免費主機 GCP 設定教學
站長必學
- 秒開網站不是夢想！WP Rocket 外掛教學，提升你的 WordPress 載入速度
- 如何製作出更引人注目的行動呼籲 ( CTA )？WordPress 內建「可重複使用區塊」教學
- 如何改善網站速度？WP Rocket 快取外掛教學，秒開網站不是夢想！
- WordPress 網站如何搬家？All-in-One WP Migration 最方便搬家外掛教學
- WordPress 網站上的英文如何改成中文？Loco Translate 翻譯外掛教學
- 如何提升 WordPress 網站速度？使用 WebP 圖片格式縮短網站載入時間
- WordPress 網站主機該如何選擇？4 種常見的主機類型比較，找到最適合你的主機
- 如何更換 WordPress 網站字體？利用自訂 CSS 功能 1 分鐘搞定！
- 如何自訂 WordPress 文章標題樣式？5 步驟學會用 CSS 自己改樣式！
- 如何在 WordPress 網站中，啟用自動 Email 通知回覆留言的人
網站行銷
- 如何在 WordPress 網站上安裝 GTM？Google Tag Manager 設定教學
- 如何製作 WordPress 電子報？MailerLite 完整設定教學，No.1 電郵行銷工具推薦
- 如何用 Gmail 收發公司電子郵件？Gsuite 完整註冊、設定教學
- 1 分鐘快速製作專業 Email 簽名檔教學，Gmail, Outlook 適用！
- 如何用自己的網址收信？ 5 分鐘教你免費建立網域信箱的方式
疑難雜症
- 如何修正 Google 搜尋結果跟網站的文章標題不一樣？1 個步驟輕鬆解決！
- 你的 WordPress 網站正常嗎？1 個步驟馬上為網站進行健康檢查
- 如何修復 WordPress 因為重新指向次數過多，而導致網站無法顯示的問題
- 為什麼啟用了 https 網址卻還顯示不安全？3 個解決 WordPress 網站 SSL 失效的方法
- 你的 WordPress 網站收不到信嗎？安裝免費 SMTP 外掛 5 分鐘輕鬆解決。
- WordPress 網站出現錯誤了怎麼辦？5 分鐘教你如何找到出錯原因
進階技巧
- 【2020】Cloudflare 教學，免費提升 WordPress 網站速度、安全性
- 如何正確地開放 WordPress 後台權限給合作廠商，並且保護自己資料安全？
- 如何將你的 WordPress 網站變成手機 App？拿起手邊的 iPhone 1 分鐘完成！
- 如何修改 WordPress 內部檔案？5 分鐘教你透過 SFTP 遠端修改！
- 你知道 WordPress 可以用快速鍵寫文章嗎？利用 Markdown 語法提高你寫文的速度
天才行銷工程師
你好，詢問一下，如要做成和本篇文章一樣，有數字的藍色icon標題的話，是要如何去做呢？謝謝