Поместите fontastic.me как «дашиконы», не блокируя существующие деспиконы WordPress
Чего я пытаюсь достичь:
Я хочу использовать пользовательские значки на моем веб-сайте WordPress (в том числе в меню администратора).
Что я сделал до сих пор
Я создал учетную запись на fontastic.me и поставил в очередь шрифт с помощью следующего в functions.php, подключенном к «стилям печати администратора»
wp_enqueue_style('fontastic-css', 'https://file.myfontastic.com/<mycode>/icons.css');
Я установил название своих значков на fontastic me как «dashicons», потому что таким образом вы можете напрямую использовать их в меню администратора, например.
add_menu_page(
'Page Title',
'Menu Title',
'Capability',
'menu_slug',
[ $this, 'call_back' ],
'dashicons-custom-icon-name',
1
);
Если вы называете их чем-то другим, например, Пользовательские иконки, которые вы не можете использовать их так легко.
Я также пробовал ставить в очередь другими способами, но проблема та же, что и в документе ниже.
В чем проблема?
Однако, делая это, я, очевидно, перезаписываю / блокирую / вообще вмешиваюсь в существующую библиотеку ‘dashicons’, поставляемую с WordPress.
Это означает, что любые черты в WordPress, которых нет в моей библиотеке, не могут быть загружены, и у меня остаются пустые квадраты в их местах.
Буду очень признателен за любую помощь в определении того, как я могу добавить в библиотеку дашиконов, а не перезаписать. Благодарю.
Решение
Решение этой проблемы заключается в следующем:
1) Вернитесь к fontastic.me и измените шрифт, чтобы он больше не был «dashicons», а что-то другое, например. ‘CustomIcons’.
2) Удалите код «dashicons-custom-icon-name» из функции меню — пусть по умолчанию используется стандартный «dashicons-admin-generic».
3) Загрузите ваш шрифт из fontastic me и откройте его в редакторе, чтобы у вас была ссылка на все коды значков. Я не могу найти их на веб-сайте.
4) Добавьте следующее в таблицу стилей для каждого значка, на который вы хотите настроить таргетинг.
#adminmenu li.toplevel_page_bnfo_database div.wp-menu-image.dashicons-admin-generic:before { // change 'menu_slug' to whatever your menu slug is
font-family: yourfont; // this needs to be whatever you called it on fontastic.me
content: "\62"; // Whichever icon you want to show.
}
Почему это не идеальное решение
Кажется, для этого требуется больше кода и он будет более громоздким, чем решение, которое я изначально искал.
Тем не менее, это решение, которое используют поставщики плагинов (например, WooCommerce), поэтому может быть лучшим выбором.
Другие решения
Других решений пока нет …