怎麼給wordpress添加小圖標（給WordPress的dashicons添加自定義圖標）

2023-05-15 20:50:43 2

Dashicon是WordPress本身自帶的一套圖標系統，它滿足了WordPress後臺對小圖標的需求，但也僅僅是滿足了WP自身的後臺使用而已。為了避免不必要的冗餘，WordPress官方也並沒有打算把它打造成一套豐富的圖標，而是把這個空間留給了開發者和設計師。如果你開發的插件需要在WP的後臺新建菜單，或者你的網站有著各種自定義的Post類型，那麼你可能就需要添加自己的圖標了，畢竟，WP自帶的圖標庫中，去掉WP正在使用的那些，可選的真是不多。

生成新的Dashicon，可以藉助一個網站 – Glyphter（https://glyphter.com）。網站本身就提供了一些圖標給你添加，這些圖標都是開源的，可以免費使用，其中就包含了Font Awesome以及眾多其他有名的圖標庫：

使用方法也很簡單，打開網站，從右側直接拖圖標到左側的格子中。你也可以點擊左側空白的紅色格子，從本地電腦裡選擇svg格式的圖片上傳。圖中前四個圖標是網站提供的，後三個圖標是我本地上傳的：

點擊左上角的齒輪圖標，設定Font Name和Class Prefix，這裡的Class Prefix必須填寫「dashicons-」，這是因為在WordPress後臺調用圖標的時候，一些後臺接口參數中系統只會把「dashicons-」前綴的樣式認作圖標。

依次選定每個圖標，在左側的設置欄中填寫每個圖標的Class Name，每個圖標對應一個不同的Class Name。建議要檢查下WordPress現有的dashicon庫，不要填寫已有的名字。在這裡你可能已經發現了：我上傳的這個svg圖片原本是藍色的，這個網站會自動去掉顏色值，顯示為白色。那是因為接下來要導出的圖標文件是一個字體庫，只需要矢量的字體輪廓信息即可，這個網站會幫你自動去除顏色信息。

圖標準備完成後，點擊上面的保存按鈕，就可以直接下載。當然如果你註冊了帳號並登錄，這個網站可以保存你自定義的圖標庫以便多次使用修改。為了簡化說明，我這裡選擇Just Download。

下載完畢後，在自己的主題目錄下新建一個「dashicons」目錄，然後把下載的文件解壓到這個目錄下，注意css文件的位置後面要用到。

打開css文件，修改圈出來的幾行：

改為：

.dashicons-calculator:before,.dashicons-camara:before,.dashicons-thumb:before,.dashicons-key:before,.dashicons-cfg:before,.dashicons-ble:before,.dashicons-flight:before{ display: inline-block; font-family: 'icn jennystudio'!important; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

這個修改的意義是限定這些自定義圖標加載下載的字體文件，如果不做這個修改，系統原先的dashicons會顯示不出來。

打開主題的function.php文件，添加如下代碼，注意檢查上傳的icn-jennystudio.css文件路徑必須正確

function brain1981_add_customized_dashicons { wp_register_style('my_plugin_name_dashicons', get_template_directory_uri.'/dashicons/css/icn-jennystudio.css'); wp_enqueue_style('my_plugin_name_dashicons');}//在網站前臺加載圖標字體add_filter( 'wp_head', 'brain1981_add_customized_dashicons' );//在網站後臺加載圖標字體add_action( 'admin_print_styles', 'brain1981_add_customized_dashicons' );

自此，準備工作已經完成，下面舉例如何調用這些圖標。

給自定義文章類型指定圖標舉例：

//註冊自定義類型productregister_post_type('product', array( 'label' => 'Product', 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'capability_type' => 'post', .... 'menu_icon' => 'dashicons-cfg', //這裡就是我指定的圖標 ));

效果如下

自定義的管理頁面，比如自己開發的插件或主題的設定頁面

add_action('admin_menu', 'options_admin_menu_b');function options_admin_menu_b{ //注意最後的參數名稱為自定義的圖標 add_menu_page('My Plugin Settings', 'My Plugin Name', 'administrator', 'my-plugin-slug', 'my_plugin_settings_page', 'dashicons-key');}

總結：本文主要是依靠Glyphter這個網站生成了圖標字體文件，並在WordPress站點追加引用這個字體，從而實現添加自定義dashicon的目的。Glyphter是個很不錯的輔助工具，當然如果你有其他更好用的SVG轉字體工具，也可以作為替代，本文只是拋磚引玉，記錄一下自定義dashicon的思路。