換成 Begin 主題之後，大夥都不約而同的給選單用上了圖示字型，確實給部落格帶來了一定的美化效果。

與之配套的是 font awesome 4 menus 這個圖示字型外掛，其實還是挺小巧的。

不過，在強迫症的眼裡，能程式碼化就儘量不用外掛吧！於是將這個外掛改造成程式碼版，順便精簡了基本用不到的 shortcode 圖示呼叫功能。

下面說一下整合到主題的方法：

一、下載上傳

下載地址

下載並解壓後得到 awesome 資料夾，整體上傳到 WordPress 主題目錄。

二、主題整合

編輯 WordPress 當前主題目錄下 functions.php 檔案，在<?php  之後新增如下程式碼：

//整合圖示字型功能 
include("awesome/main.php");

最後儲存即可。

三、圖示使用

圖示字型的使用，相信大部分 Begin 使用者都已經熟知了。對於首次使用的使用者，張戈部落格還是繼續介紹下好了！

先貼一下效果截圖，瞭解一下圖示字型是個什麼東東：

其實，就是在需要的位置顯示一個圖示而已。而這一切由 CSS+fonts 來實現，即圖示字型。

理論上，圖示字型可以用在網站的任意位置，只需要用 i 標籤加 class 來新增即可。

比如我要加入微信圖示，我只要在需要顯示的位置新增如下標籤即可：

<i class="fa fa-weixin"></i>
 

而我們想要更多的圖示，就需要到官方的圖示庫裡面去查找了：

http://fortawesome.github.io/Font-Awesome/icons/

找到自己中意的圖示後，點選開啟即可得到相應的標籤 class 了！

那如何使用到 WordPress 導航選單呢？

很簡單，依次開啟 WordPress 後臺==>外觀==>選單，然後點開已有選單，將得到的 class 填入到 CSS 類即可，比如我在官方圖示庫查到“家”圖示的 class 是 fa fa-home，所以我如下填寫：

儲存之後，WordPress 導航選單上的【首頁】前面就會出現一個“家”的圖示了。

如果發現點開選單沒有 CSS 類欄位怎麼辦？

很明顯，你沒把這個功能開出來。點選選單頁面右上方的【顯示選項】，勾上 CSS 類即可：

如果發現點選【顯示選項】沒動靜怎麼辦？

看來你的 WordPress 也是升級 4.2 了。解決辦法見張戈部落格之前的分享【修復 WordPress 4.2 問題】

四、更多折騰

好了， 做完上面的操作後，就可以徹底刪除 font awesome 4 menus 這個外掛了，強迫症們是不是又感覺輕鬆了一些呢？哈哈！

不過，有心的朋友可能發現了，這個圖示字型的 CSS 檔案達到 20 多 kb，而我們真正要用的也就幾個到十幾個圖示而已！所以，喜歡折騰的朋友可以進一步精簡一下 CSS 檔案。

開啟 awesome 資料夾，編輯 css 資料夾下的 font-awesome.min.css 檔案，刪除沒用到的圖示 css 定義即可。

不過這個 font-awesome.min.css 檔案是壓縮後的，看起來很暈！可以先百度搜一下 CSS 美化工具，將其格式化之後再來編輯！

不過 CSS 前面引入字型和公用樣式程式碼記得要保留，如下所示

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 transform: translate(0, 0);
}

好了，本文就分享到這裡，喜歡折騰的朋友可以試試看。