WordPress 使用 Dashicons 字型圖示

隨著 WordPress 3.8 版本重新設計的後臺，WordPress 還引入了一套全新的字型圖示 Dashicons.

Dashicons 是專門為 WordPress 設計的字型圖示，主要是為了迎合新的後臺管理介面設計。

可以看到，從側邊導航選單到 Admin Bar，再到文章編輯器，都大量的使用了 Dashicons 字型圖示，而且很漂亮。

WordPress 使用 Dashicons 字型圖示來美化後臺管理介面，你也可以把它應用到主題或外掛裡，包括前臺介面和後臺介面。

Dashicons 圖示大全

在正式開始之前，我們首先來看一下 Dashicons 到底支援多少圖示。

在 WordPress 官網的 Dashicons 主頁可以看到全部的圖示，而且可以獲取到它的 CSS 程式碼、 Html 程式碼和 Glyph.

在後臺側邊選單使用

後臺的側邊選單可以說是 Dashicons 圖示最常使用的地方了，當你在側邊選單建立一個頂級選單時，你就可以給這個選單設定一個小圖示，這個小圖示可以是自定義的圖片，還可以直接使用 Dashicons 字型圖示。

例如下圖：

在頂級選單上呼叫 Dashicons 字型圖示需要在註冊自定義選單時完成，比如呼叫 add_menu_page() 函式新增一個頂級選單時：

更多你可以瞭解 add_menu_page() 函式的用法，第六個引數可以直接填入 Dashicons 圖示的 CSS 類。

圖示的 CSS 類可以在 Dashicons 主頁裡獲取，在網頁下邊點選要使用的圖示，就可以在上方看到圖示的 CSS 類了。

不只是 add_menu_page() 函式，在其它可以設定頂級選單圖示的地方都可以直接填入 Dashicons 圖示的 CSS 類，比如自定義文章型別：

在後臺使用

有時我們不一定非得要在後臺選單上使用，一些後臺的頁面上也可以自由呼叫 Dashicons 圖示。

Html 呼叫

在頁面上呼叫最簡單的辦法就是使用 Html 程式碼。在 Dashicons 主頁選擇要使用的圖示，然後點選上方大圖示旁邊的 「Copy HTML」，這時就會彈出圖示的 Html 程式碼，直接複製即可。

剩下只需要在需要的地方刪帖這段 Html 程式碼即可呼叫圖示。

CSS 呼叫

還有另一種情況，我們無法直接修改 Html 程式碼，但是能新增 CSS 程式碼，這時就要用 CSS 程式碼來呼叫圖示。

在 CSS 中，圖示是需要使用 :before 和 :after 兩個偽類來實現的呼叫的。

和上邊一樣，去 Dashicons 主頁來選擇要使用的圖示，接著點選上方大圖示旁邊 「Copy CSS」，複製彈出來的視窗裡邊的 CSS 程式碼。

然後把複製的 CSS 程式碼應用到實際中，例子：

在前臺使用

這麼好看的圖示如果只在後臺使用就太浪費了，其實在前臺也是照樣可以使用的。

在前臺使用的思路和剛才介紹的 「在後臺使用」 是一樣的，都是利用 Html 程式碼或 CSS 程式碼呼叫。

唯一的不同在於，因為 Dashicons 圖示需要一個 CSS 檔案的支援，而預設後臺是自動引入的，但前臺沒有引入。

所以，在前臺使用 Dashicons 圖示之前需要先引入 Dashicons 字型圖示的 CSS 檔案。

引用的方法很簡單，只需要開啟主題的 functions.php（瞭解更多） 檔案，然後在裡邊新增下邊的程式碼：

接下來是使用 Html 呼叫還是 CSS 呼叫就要看你自己的情況了。