Dashicons and Pseudo :before

时间:2014-01-14 作者:iamdannywilson

我正在生成一个自定义帖子类型,该类型使用虚线图标,并允许用户选择一个与帖子关联的类型。用户可以从下拉列表中选择图标,并将其显示在右侧。

但我遇到了一个问题,因为javascript无法更改:before { content: \'\\f188\';} 因此我计划在元素上使用数据属性(数据图标),然后使用:before { content: attr(data-icon);}.

这可以工作,并用必要的图标代码替换内容,但出于某种原因,会将其呈现为文本而不是图标。切换回仅在css中使用文本(而不是数据属性)。

HTML:

<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
    <option value="\\f118">Education</option>
    <option value="\\f130">Status</option>...
    ...<option value="\\f161">Gallery</option>
</select>
<span id="content_icon" data-icon="\\f118"></span>
CSS:

#content_icon:before {
content: attr(data-icon);
font: 400 20px/1 dashicons!important;
speak: none;
color: #333;
padding: 8px 0;
height: 36px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
JS公司:

var $j = jQuery;
$j(document).ready(function(){
    $j(\'#_mo_content_menu_ico\').change(function(){
        var icon = $j(\'#_mo_content_menu_ico\').val();
        $j(\'#content_icon\').attr(\'data-icon\',icon);
    });
});
你知道怎么绕过这个吗?或者为什么会这样?

谢谢

1 个回复
最合适的回答,由SO网友:Sven 整理而成

虚线图标只是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);

结束

相关推荐

WordPress在子目录wp-admin中出现问题

我在网站的子目录中安装了WordPress 3.3.1,用作临时测试站点。似乎是根站点.htaccess 正在为Wordpress wp管理页创建问题。我已经设置了WordPress Address (URL) 和Site Address (URL) 正确指向子目录url。如果我没有.htaccess 在我的子目录内(wp root)=wp admin(登录页)工作。如果我添加.htaccess 如下图所示,该页面可以正常工作,如果您登录到wp admin,则可以正常工作BUT 每次尝试保存内容时=空白页