To add icons to menus in WordPress, you can use a combination of custom CSS and possibly icon fonts like Font Awesome. Here’s a step-by-step guide on how to do it:

Step-by-Step Guide:

  1. Choose Your Icon Font (Optional):
  • If you prefer using icon fonts like Font Awesome, make sure it’s included in your theme or you can enqueue it manually in your theme’s functions.php file or via a plugin.
   // Enqueue Font Awesome CSS
   function enqueue_font_awesome() {
       wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4', 'all');
   }
   add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
  1. Upload Custom Icons (Optional):
  • If you have custom icons (SVG, PNG, etc.) that you want to use, upload them to your WordPress Media Library.
  1. Identify Menu Items:
  • Go to Appearance > Menus in your WordPress dashboard.
  • Select the menu you want to edit or create a new one.
  • Expand each menu item and note down its CSS class or ID. If you don’t see the CSS Classes option, click on Screen Options (top right) and enable CSS Classes.
  1. Add Custom CSS:
  • Go to Appearance > Customize in your WordPress dashboard.
  • Navigate to Additional CSS (the location might vary depending on your theme).
  • Use CSS classes or IDs to target specific menu items and add icons using CSS pseudo-elements (::before or ::after). Example CSS for Font Awesome icons:
   .menu-item-123::before {
       font-family: 'Font Awesome 5 Free';
       content: '\f007'; /* Unicode for the icon you want */
       margin-right: 5px; /* Adjust spacing */
   }

Example CSS for custom uploaded icons:

   .menu-item-123::before {
       content: '';
       display: inline-block;
       width: 20px; /* Adjust size */
       height: 20px;
       background-image: url('path/to/your/icon.png');
       background-size: cover;
       margin-right: 5px; /* Adjust spacing */
   }
  1. Apply CSS Classes:
  • In the WordPress Menu Editor (Appearance > Menus), open the Screen Options tab (top right) and check “CSS Classes” if it’s not already visible.
  • Edit each menu item and add a custom CSS class (e.g., menu-item-123) to target it with CSS.
  1. Save Changes:
  • After adding the CSS for each menu item, click “Publish” or “Save & Publish” to apply your changes.

Notes:

  • Icon Sources: Ensure you have the rights to use any icons you upload or reference. Font Awesome is commonly used and typically included in many themes.
  • Customization: Adjust the CSS properties (like size, spacing) to fit your design preferences.
  • Theme Compatibility: Some themes might handle menus differently, so adjust CSS classes and IDs accordingly based on your theme’s structure.

By following these steps, you can effectively add icons to your WordPress menu items using custom CSS and potentially an icon font, enhancing both functionality and visual appeal on your website.