你有沒有注意到，很多網站的文章標題旁邊或段落前面，有一些精緻的小圖示？那些通常不是圖片，而是用字型做出來的 Icon。每次需要圖示都要找圖片、上傳圖片，真的很麻煩，Font Awesome 就是專門解決這個問題的工具。
Font Awesome 俗稱 Icon Font，本質上是字體，可以用 CSS 控制大小、顏色，跟文字完全融合，放再大也不模糊，不需要用圖片。如果你也在意中文字型的選擇，可以參考這篇 justfont 雲端字型 的介紹。目前是使用人數最多的 Icon 字型服務，在 WordPress 上也有官方外掛可以直接安裝，設定完成後就能在文章、頁面裡插入圖示，完全不需要動到程式碼。
影片教學
Font Awesome 是什麼？
Font Awesome 是一套 Icon 字型函式庫，裡面收錄了幾千個設計好的圖示，從箭頭、星星、社群媒體 Logo、購物車到各種應用圖示都有。免費版就已經有很多圖示可以用，付費版可以解鎖更多精緻的設計風格和較高的流量上限。
在 WordPress 上可以直接安裝 Font Awesome 官方外掛，設定完成後就能在文章、頁面、小工具裡插入 Icon，不需要手動引入任何程式碼，對一般使用者來說非常友善。
怎麼設定 Font Awesome WordPress 外掛？
安裝好外掛之後，第一步是到設定頁面填入 API Token。頁面裡有一個選項 How are you using Font Awesome，選 Use A Kit，然後點選下方連結到 Font Awesome 官網申請帳號。
申請好帳號之後，到帳號設定找到 Tokens 區塊，複製這串 Code，貼回外掛設定的 API Token 欄位，基本設定就完成了。
要使用 Icon，進到 Font Awesome 官網搜尋你要的圖示。如果是免費方案，記得先切換成 Free 篩選，不然搜尋到付費 Icon 是無法使用的。找到合適的圖示之後，點一下圖案，複製 HTML 程式碼，例如 <i class="fa-brands fa-apple"></i>。
比較麻煩的地方是這段程式碼不能直接貼到視覺編輯器，需要先在區塊編輯器中切換到程式碼模式才能貼上。對於文章比較長、或不太熟悉切換編輯器的使用者來說，確實有點不方便。
Font Awesome 進階用法：短代碼讓你省很多力
如果你每篇文章的固定段落都會用到相同的 Icon，每次都切換到程式碼編輯器。對能切換到程式碼，長期下來真的很耗時間。
我自己的做法是把常用的 Icon 做成自訂短代碼，需要的時候直接在視覺編輯器輸入就好，完全不需要切換模式。例如把書籤 Icon 做成 [icon-bookmark]，輸入後就自動顯示帶 Icon 的格式，設定好之後用起來順很多，後續要統一替換 Icon 風格也方便。
這個方法一開始設定會多花一點時間，但如果你本來就打算長期使用 Icon，後續省下的時間遠遠值得。
Font Awesome 和 Google Material Icons 怎麼選？
目前比較主流的 Icon 字型服務主要就兩個：Font Awesome 和 Google 推出的 Material Icons，兩個都有大量使用者，各有優缺點。
Font Awesome 優缺點
優點是圖示設計比較精緻漂亮，有 WordPress 官方外掛可以直接安裝，對不熟悉程式碼的使用者很友善。缺點是很多好看的圖示需要付費，免費版透過 Kit 使用，每月有 10,000 pageviews 的上限，超過後 Icon 可能無法正常顯示，這一點要特別留意。
Google Material Icons 優缺點
優點是完全免費使用，沒有瀏覽次數的限制，可以設定的細節也比 Font Awesome 多。缺點是圖示的精緻度差一點，初次設定對不熟悉程式的人來說也比較複雜。
我的建議是：WordPress 使用者，尤其是不想手動引入 CSS 的，直接選 Font Awesome，外掛支援讓你設定省很多力。如果你本身有技術背景、或比較在意完全免費，Google Material Icons 是個好選擇。
金城老師觀點
說實話，剛開始用 Icon Font 的時候，我以為只是個裝飾性的東西，後來才發現對文章的整體質感影響很大，尤其是在標題旁邊加上對應的小圖示，視覺上的清晰度會提升不少。
我自己現在主要還是用 Font Awesome，因為外掛設定方便，全站的 Icon 也比較容易統一管理。短代碼的設定我強烈，文章一多你就會發現那個切換編輯器的動作有多煩。
有一件事要特別注意：Font Awesome 免費版每月有 10,000 pageviews 的上限，如果你的網站流量已經有一定規模，記得到帳號後台確認一下有沒有超過，Icon 無法顯示會直接影響到使用者體驗。
延伸閱讀
參考資料
常見問題
Font Awesome 是什麼？
Font Awesome 是一套 Icon 字型函式庫，圖示本質上是字體，可以像文字一樣放大縮小、改變顏色，不需要用圖片，在網頁排版上非常實用。
WordPress 要怎麼使用 Font Awesome？
安裝 Font Awesome 官方外掛，到外掛設定填入 API Token 後即可使用。找到想用的圖示，複製 HTML 程式碼，切換到程式碼編輯器貼上即可。
Font Awesome 免費版夠用嗎？
大部分情況夠用。免費版包含大量圖示，但透過 Kit 使用時每月有 10,000 pageviews 的上限，網站流量較大時需留意是否超過。
Font Awesome 和 Google Material Icons 哪個比較好？
Font Awesome 圖示較精美，有 WordPress 外掛支援；Google Material Icons 完全免費、沒有瀏覽次數限制。WordPress 使用者通常推薦 Font Awesome，因為外掛設定更簡單。
Font Awesome 的 Icon 可以用短代碼插入嗎？
可以，透過 Shortcode 外掛把常用 Icon 的 HTML 設成短代碼，就能在視覺編輯器直接輸入，不需要每次切換到程式碼編輯器。