2017-08-01 58 views
1

我加入了JavaScript的图标在我的管理栏,但图标显示为“广场”,所以我想通过这样的图标添加样式:添加字体真棒到管理栏在WordPress的

$('#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>'); 

任何建议?

回答

0

使用FontAwesome步骤通过步骤例如:

包括颜色和自定义后类型

通过步骤例如使用FontAwesome步骤:

包括颜色和自定义后类型

1皮克一个图标

转到:http://fontawesome.io/icons/ 选择一个图标,我为此示例选择了“fa-flask”。

2获取SVG

转到:https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg 找到图标,这将是没有发前缀的名字 - 在我的情况,那就是“flask.svg”。 单击该图标,然后单击“RAW”在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:向path/s元素添加fill =“black”属性 - 这允许通过Wordpress更改颜色。 2 :(可选)将宽度和高度更改为20,因为这是管理员宽度/高度大小,并且看起来会导致更清晰的结果。