Day 22:如何增加你 Hexo 的選單 Icon?

之前不管是介紹到主選單或是 Social Links,可以發現它本身都有預設的 Icon 圖示可以對應。但是萬一今天我想要自訂一個新的選單,但是 Hexo 預設並無提供適合的 Icon 該怎麼辦呢?

什麼是 Font Awesome?

今天要介紹的服務叫做 Font Awesome,其實大家可以嘗試在 Next 佈景主題內的 config 搜尋這個服務名稱,就可以看到許多註解都提到它,Hexo 預設使用的 Icon 服務就是 Font Awesome。

這項服務是基於 CSS 與 LESS 的字體和圖標套件工具,它本身提供了一系列的 Icon 圖庫,我們只需在網站引入 Font Awesome 後,如果在 Font Awesome 看到喜歡的圖示,可以複製它提供的語法或是在自己 HTML 輸入相對應的 class 名稱即可使用該 Icon。

至於 Hexo 本身就已經載入了 Font Awesome 服務,因此就能夠直接使用。

透過 Font Awesome 尋找適合的 Icon 圖示

首先到服務網站,點擊頂部主選單的 Icons 後,會出現許多 Icon 圖示讓我們做挑選。

其中如果圖示是比較淺色的,代表需要購買 Font Awesome Pro 才能夠取得,因此如果要免費使用的話,可以以圖示顏色判斷哪個圖示是能夠免費使用的。

挑選 Font Awesome Icon 圖示

我們隨機選擇一個圖示進入,可以直接點擊「Start Using This Icon」。(如果是需要購買 Icon 才能使用會提示)

點擊 Start Using This Icon

此時就可以直接複製語法或是記下此 Icon 的 class。

Icon 語法

在 Hexo 上使用自己找到的 Icon

此時回到 Next 的 config 來去設定 Icon,我認為它似乎可用在關於頁的鏈結,因此將原本 Icon 註解,替換成新的試試看:

替換 Icon

替換後的結果,關於頁鏈結 Icon 成功地變成剛剛所挑選的 Icon 圖示。

Icon 成功替換

參考資料

本篇文章同步發布於 iT 邦幫忙


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)