我想更改边栏中的图标

Question

使用WordPress，我想找到一种更改图标的方法。

您可以在补充工具栏中看到一些图标，例如“仪表板”，“个人资料”和“折叠菜单”。

我很高兴更改“折叠菜单”图标。

在menu-header.php中，有关于该按钮的描述，

echo '<li id="collapse-menu" class="hide-if-no-js">' .
        '<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main menu' ) . '" aria-expanded="true">' .
        '<span class="collapse-button-icon" aria-hidden="true"></span>' .
        '<span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>' .
        '</button></li>';

我认为我必须更改CSS文件中名为“ collapse-button-icon”的类。 但是我不知道它在哪里，以及如何。

我尝试过检查。 因此，我发现此CSS制作了图标。

{
    position: relative;
    float: left;
    font: normal 20px/1 dashicons;
    speak: none;
    padding: 4px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none!important;
    margin-right: 6px;
}

font: normal 20px/1 dashicons;

使用上面的样式，我可以看到图标，但是如果没有它，我将看不到任何图标。

我该如何解决？ 谢谢。

Answer 1

使用浏览器开发人员工具（F12）并检查该类，以了解CSS的发展方向。引导文件很有可能。

您可以用自己的类覆盖该类CSS并更改图标外观。

Answer 2

有一个包含所有wordpress破折号的列表。

https://www.kevinleary.net/wordpress-dashicons-list-custom-post-type-icons/

找到特定图标后，您可以使用一些CSS对其进行更改。

 .dashicons-NameOfTheIcon::before{
    content: "\f105" !important;
   }

只需对“折叠”图标使用admin-collapse。

.dashicons-admin-collapse::before {
   content: "\f105" !important;
}

您可以在css内容中使用的Dashicon：

https://developer.wordpress.org/resource/dashicons/#buddicons-buddypress-logo

Answer 3

好吧，到目前为止，我了解到您想用自己的图标替换管理图标。 因此，请按照说明进行操作...

在管理员头中注册您自己的图标库。例如，我已经注册了FontAwesome图标。

function my_FAwesome_icons() {
    echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">';
}

add_action('admin_head', 'my_FAwesome_icons');
add_action('wp_head', 'my_FAwesome_icons');

然后只需注册您自己的样式表即可覆盖破折号...

function my_admin_styles_register() {
    echo '<link href="/path/my-admin-styles.css"  rel="stylesheet">';
}

add_action('admin_head', 'my_admin_styles_register');

在您的my-admin-styles.css文件中，您可以尝试这样的示例CSS：

icon16.icon-media:before,
#adminmenu .menu-icon-media div.wp-menu-image:before {
    font-family: Fontawesome !important;
    content: '\\f0a4';
}

如何查找FontAwesome Unicode，请检查屏幕截图