Font Awesome – 在 WordPress 網站的選單上使用精美的字體圖示

目前已有許多免費的圖標字體資源可下載(參考【讓 WordPress 使用精美的字體圖示】這篇文章 )。但是 Font Awesome 就是現在相當熱門的字體圖示庫。這套字體圖示庫聚集了 600 多餘款圖示樣式,除了包括 Twitter Boostrap 的預設圖示外,還有社群網站圖示、Web 應用程式圖示和編輯器圖示等等…重點是可以免費用於商業項目。

常常會看到別人的 WordPress 網站上的選單會有精美的小圖示,今天就是要跟大家分享如何在『選單』上增加 Font Awesome 圖示。

  1. 到 Font Awesome 官網
    首先連上 Font Awesome.io 網站,接著我們點選官網上 Start 來到開始使用的網頁,如果妳想要使用官網新的載入方式(改用 JS 文件來載入),填寫一個有效的 email 訂閱,會立刻收到官網的信件,裡面有 JS 引用連結。開啟佈景主題的 header.php 檔案(建議先複製 header.php 檔案到子佈景主題資料夾內,然後再對它作編輯的動作),在<head></head>之間置入這一行字串:

    <script src="https://use.fontawesome.com/c751ddba86.js"></script>
  2. 設定字體圖示的 CSS 來源
    使用這個字體圖示的方式有很多種,包含上面步驟所介紹的;但今天筆者要示範給大家看的,這個方法不用連線到官網填寫妳的 email ,且連檔案都不需要下載。開啟佈景主題的 function.php 檔案(同樣的還是建議先複製 function.php 檔案到子佈景主題資料夾內,然後再對它作編輯的動作),在置入以下的代碼:

    //Enqueue the Font Awesome script
    add_action( 'wp_enqueue_scripts', 'load_fontawesome_front_end' );
    function load_fontawesome_front_end() {
    	wp_register_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
    	wp_enqueue_style( 'fontawesome' );
    }

    這個動作是讓網頁先載入 font-awesome.min.css 式樣,這樣才可以開始使用它提供的各種圖示。

  3. 查找要使用字體圖示代碼
    接著我們要開始使用,首先點擊官網首頁的 Icons 連結,會列出一些常用的圖示分類;如果透過分類尋找覺得慢,可以在下方的「搜尋欄」直接輸入搜尋,然後試著輸入查找關鍵字,例如:word,網頁上會列出相關的圖示,再選擇自己需要的圖示,選定後將它的圖示代碼記住,這裡以「fa-wordpress」代碼為例。
  4. 在選單內填入查找到代碼
    本文我們以 WordPress 的「選單」來做範例,示範如何使用 Font Awesome 字體圖示。到後台的「外觀→選單」,編輯要加入圖示的項目,在《導覽命名》欄位填入選好的圖示代碼(fa-wordpress)。

    在 WordPress 選單加入 Font Awesome 字體圖示
  5. 圖示代碼對照表
    Font Awesome 官網也提供了很多的範例與圖示給大家方便對照與使用,別忘了要多加利用!

RelatedPost

推薦閱讀ಠ.ಠ  使用 WordPress 內建的工具來修復和優化資料庫

發表留言