Question

我在管理栏中添加了带有javascript的图标，但图标显示为＆＃34; square＆＃34;，所以我尝试添加带有这样图标的样式：

$('#wp-admin-bar-root-default').replaceWith('<link rel="stylesheet" id="commentator-font-awesome-css"  href=".../css/font-awesome.min.css" type="text/css" media="all" /><i class="fa fa-instagram" aria-hidden="true"></i>');

有什么建议吗？

Answer 1

使用FontAwesome的分步示例：

包括颜色和自定义帖子类型

使用FontAwesome的步骤示例：

包括颜色和自定义帖子类型

1选择一个图标

转到：http://fontawesome.io/icons/ 选择一个图标，我选择了＆＃34; fa-flask＆＃34;对于这个例子。

2获取SVG

转到：https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg 找到图标，它将是没有fa前缀的名称 - 在我的例子中，就是＆＃34; flask.svg＆＃34;。单击图标，然后单击＆＃34; Raw＆＃34;在Github 将SVG带入Wordpress

在您注册自定义帖子类型的functions.php中，添加以下代码段：

add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        // .. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

重要说明：

base64_encode的内容是Font Awesomes github页面中复制的原始字符串。你需要在svg字符串中更改两个小东西： 1：添加填充=＆＃34;黑色＆＃34;属性为path / s元素 - 这允许通过Wordpress更改颜色。 2 :(可选）将宽度和高度更改为20，因为这是管理员宽度/高度大小，似乎可以使结果更加清晰。

在Wordpress

1 个答案: