Я хочу изменить значок в боковой панели

Question

Используя WordPress, я хочу найти способ изменить значок.

Вы можете увидеть некоторые значки в SideBar, такие как «Панель инструментов», «Профиль» и «Свернуть меню».

Я буду рад изменить значок «Свернуть меню».

В 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>';

Я думаю, что должен изменитьсякласс с именем 'collapse-button-icon' в файле CSS.Но я не знаю, где это и как.

Я пытался проверить.Таким образом, я обнаружил, что этот 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

Существует список со всеми дашиконами 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-содержимом:

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

Answer 2

Ну, пока я понимаю, что вы хотите заменить значки администратора своими собственными значками.Следуйте инструкциям ...

Зарегистрируйте свою собственную библиотеку иконок в административной главе.Например, я зарегистрировал значки 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.css файл, вы можете попробовать пример css следующим образом:

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

Как найти FontAwesome Unicode, проверьте скриншот

Answer 3

Используйте инструменты разработчика вашего браузера (F12) и осмотрите этот класс, чтобы увидеть, откуда идет CSS.Скорее всего, файлы начальной загрузки.

Вы можете перезаписать этот класс CSS своим и изменить внешний вид значка.