如何在WordPress前台瀏覽啟用Dashicons內建圖示組？

WordPress網站除以圖片來豐富整個呈現視覺化，常常也會利用如Font Awesome、Elusive Icons、Genericons等各種圖示組(icon sets)，但得額外雲端載入圖示檔案，甚至得利用外掛以方便使用圖示，加上許多外掛也常會載入自己的圖示組，也就常常會成為拖慢網站速度的主要來源之一，若能善用內建Dashicons圖示組，就有助於改善網站整體速度。

Dashicons的基本介紹

Dashicons為Wordpress核心內建的圖示組，進入後台管理介面時，就會看到功能列的各項圖示，但是在前台瀏覽時，若是未登入狀態的一般使用者，Dashicons通常不會自動載入，圖示也就無法顯示，此時可利用程式碼片段(Code Snippet)載入Dashicons，讓網站視覺更加豐富。

以下介紹在前台啟用Dashicons的作法，一旦啟用前台瀏覽載入時，在撰寫網頁時，就可直接利用Dashicons來豐富網站視覺，使用方法可參考Dashicons官方網站。

延伸閱讀》Dashicons官方網站

Dashicons的載入作法

方法一：修改布景主題

修改布景主題的functions.php檔案，在<?php後方加入以下程式碼片段，就能在前台載入Dashicons，但此類作法適合在子布景主題使用，否則容易隨著布景主題更新或更換後失效，得一再地重新設定。

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

方法二：程式碼管理外掛

使用程式碼片段(Code Snippet)管理外掛程式，例如：Code Snippets、WPCodeBox等外掛程式，選擇加入PHP類型的程式碼片段，通常程式碼片段管理外掛會自動加入<?php，好處是設定會隨著外掛啟用，不會因為更換布景主題而失效。

<?php
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

除使用程式碼片段外，當然也可用Menu Icons by ThemeIsle等外掛可協助載入與管理圖示組，但就是得再安裝一個外掛，也容易造成網站速度拖慢或瀏覽時小問題，就曾經在使用Menu Icons外掛載入時，造成文章類別頁面的縮圖顯示出現問題。