To add a custom icon in WordPress, you can use the wp_enqueue_style() function to enqueue a custom CSS file that includes the icon. Here’s an example code snippet:
function wpsnippets_enqueue_custom_icon() {
wp_enqueue_style( 'custom-icon', get_stylesheet_directory_uri() . '/custom-icon.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_icon' );
In this code snippet, we define a custom function wpsnippets_enqueue_custom_icon() that uses the wp_enqueue_style() function to enqueue a custom CSS file named custom-icon.css. The get_stylesheet_directory_uri() function is used to get the URL of the current theme’s directory, and we append /custom-icon.css to it to specify the path to our custom CSS file.
We then use the add_action() function to hook our custom function to the wp_enqueue_scripts action, which ensures that our custom CSS file is enqueued on the front-end of the website.
By adding this code snippet to your theme’s functions.php file, you can easily add a custom icon to your WordPress website. Simply create a custom-icon.css file in your theme’s directory and define the styles for your custom icon in that file.
Examples
Example 1: Adding a Custom Icon to a WordPress Menu Item
This use case demonstrates how to add a custom icon to a menu item in WordPress. The code example below uses the wpsnippets_add_menu_icon() function to add a custom icon to a menu item.
function wpsnippets_add_menu_icon() {
?>
<style>
#adminmenu #menu-posts .wp-menu-image:before {
content: "f123";
}
</style>
<?php
}
add_action( 'admin_head', 'wpsnippets_add_menu_icon' );
The code above adds a custom icon to the “Posts” menu item in the WordPress admin menu. The icon is added using CSS and the content property. The icon is represented by the Unicode character f123, which corresponds to a specific icon in the Dashicons font.
Example 2: Adding a Custom Icon to a WordPress Widget
This use case demonstrates how to add a custom icon to a WordPress widget. The code example below uses the wpsnippets_add_widget_icon() function to add a custom icon to a widget.
function wpsnippets_add_widget_icon() {
?>
<style>
.widget .widget-title:before {
content: "f123";
font-family: 'dashicons';
margin-right: 5px;
}
</style>
<?php
}
add_action( 'admin_head-widgets.php', 'wpsnippets_add_widget_icon' );
The code above adds a custom icon to the title of all widgets in the WordPress admin area. The icon is added using CSS and the content property. The icon is represented by the Unicode character f123, which corresponds to a specific icon in the Dashicons font.
Example 3: Adding a Custom Icon to a WordPress Custom Post Type
This use case demonstrates how to add a custom icon to a WordPress custom post type. The code example below uses the wpsnippets_add_post_type_icon() function to add a custom icon to a custom post type.
function wpsnippets_add_post_type_icon() {
?>
<style>
#menu-posts-custom_post_type .wp-menu-image:before {
content: "f123";
}
</style>
<?php
}
add_action( 'admin_head', 'wpsnippets_add_post_type_icon' );
The code above adds a custom icon to the menu item of a custom post type in the WordPress admin menu. The icon is added using CSS and the content property. The icon is represented by the Unicode character f123, which corresponds to a specific icon in the Dashicons font.