虚线图标只是WordPress管理区域的一部分。因此,如果您的目标是在前端使用dashicons,则必须将图标字体排列在function.php
:
add_action( \'wp_enqueue_scripts\', \'frontend_dashicons\' );
function frontend_dashicons() {
wp_enqueue_style( \'dashicons\' );
}
此外,您不需要记住那些神秘的图标值,如
\\f161
; 只需添加dashicon的类名。
您可以在此处找到具有相应类名的所有Dashicon:http://melchoyce.github.io/dashicons/
(这些类名是dashicons.css
位于通过wp-includes/css/dashicons.css
)
尽管如此,您只需更新value
到HTML中dashicons的类名:
<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
<option value="dashicons-welcome-learn-more">Education</option>
<option value="dashicons-format-status">Status</option>
<option value="dashicons-format-gallery">Gallery</option>
</select>
<span id="content_icon"></span>
并按如下方式更新JS:
var $j = jQuery;
$j(document).ready(function(){
$j(\'#_mo_content_menu_ico\').change(function(){
var icon = $j(\'#_mo_content_menu_ico\').val();
// clear and add selected dashicon class
$j(\'#content_icon\').removeClass().addClass(icon);
});
});
您还必须删除CSS中的这一行:
content: attr(data-icon);