1 min read
Use FontAwesome Icons on WP Admin Panel
To replace a WordPress admin menu icon with a FontAwesome icon, you cannot directly use the menu_icon parameter because it only supports Dashicons out of the box. Instead, you will need to use custom CSS to apply a FontAwesome icon. Here’s how you can do it:
- Enqueue FontAwesome: Make sure FontAwesome is enqueued in your admin area. If it’s not, you need to add it. You can do this by adding the following code to your theme’s
functions.phpfile or a custom plugin:
function my_enqueue_admin_styles() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'my_enqueue_admin_styles');
2. Add Custom CSS to Replace the Icon: You need to add custom CSS to target the menu item for your custom post type and replace its icon with a FontAwesome icon. You can do this by hooking into the admin_head action and adding inline styles or through an admin CSS file.
Here’s how you can add an inline style directly in your functions.php file:
function my_custom_admin_menu_icon() {
?>
<style>
/* Replace 'menu-posts-your_post_type' with the actual menu ID for your custom post type */
#menu-posts-your_post_type .dashicons-before:before {
font-family: "Font Awesome 5 Free"; /* Adjust if using a different version */
content: "\f1b0"; /* Use the correct FontAwesome icon unicode */
}
/* This is to remove the original Dashicon */
#menu-posts-your_post_type .dashicons-before {
display: none;
}
</style>
<?php
}
add_action('admin_head', 'my_custom_admin_menu_icon');
- In this code, replace
your_post_typewith the slug of your custom post type, and replace\f1b0with the unicode of the FontAwesome icon you want to use. You can find the unicode on the FontAwesome icon’s detail page. - Update the
menu_iconParameter: Although you’re using CSS to replace the icon, you still need to keep themenu_iconparameter in yourregister_post_typecall to ensure WordPress allocates space for the icon. You can leave it as'dashicons-pets'or change it tonull.
or you can use this line of code if your using a CPT and paste the SVG of the icon.
'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M309.6 158.5L332.7 19.8C334.6 8.4 344.5 0 356.1 0c7.5 0 14.5 3.5 19 9.5L392 32h52.1c12.7 0 24.9 5.1 33.9 14.1L496 64h56c13.3 0 24 10.7 24 24v24c0 44.2-35.8 80-80 80H464 448 426.7l-5.1 30.5-112-64zM416 256.1L416 480c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V364.8c-24 12.3-51.2 19.2-80 19.2s-56-6.9-80-19.2V480c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V249.8c-28.8-10.9-51.4-35.3-59.2-66.5L1 167.8c-4.3-17.1 6.1-34.5 23.3-38.8s34.5 6.1 38.8 23.3l3.9 15.5C70.5 182 83.3 192 98 192h30 16H303.8L416 256.1zM464 80a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z"/></svg>'),
