在 WordPress 中使用 Dashicons

WordPress 在3.8版時就內建了 Dashicons 並用在管理後台的面板上，若是想把那些 Icon 用在前台的話，只需幾個簡單的步驟就能完成。

» 首先，將這段程式加入到主題下的 functions.php 檔案裡

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

» 然後到 Dashicons 的說明頁面，挑選要使用的 Icon
https://developer.wordpress.org/resource/

» 尋找要使用的 Icon

» 點選 Icon 之後會出現使用提示，有 CSS、HTML、Glyph 三種使用方法，Glyph 是讓 Photoserver 使用的，所以就不在此說明

» 按下 Copy CSS 就會出現 CSS 的使用提示

然後把下面的 css 樣式加到主題的 style.css 檔案裡

.dashicons-wordpress:before {
content: "f120"; /*Icon的編碼*/
display: inline-block;
color: #404040; /*色碼*/
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons'; /*字型大小*/
}

» 按下 Copy HTML 就會出現 HTML 的使用提示

你可以把 HTML 程式碼放進文章或是小工具裡，但記得要先把 span 換成 div

 div class="dashicons dashicons-wordpress" 

好了，接下來你就可以把 Dashicons 用在站內的任可地方了。