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 調用就要看你自己的情況了。