How to add WordPress Menu Icons for free (2 Methods)

Learn how to add font awesome icons to WordPress menu for better looking menus and headers on your WordPress site.
Plugin in Method 2 (Install Font Awesome)
🛑 Link -- wordpress.org/plugins/font-awesome/
THEME BUILDER TUTORIAL
🛑 Design website header using flexbox - kzbin.info/www/bejne/bKLbn6R4n56DlbM
Master CSS Basics for Elementor with my Udemy Course
🛑 Course Link -- wpalgoridm.com/udemy-css
Unlock Elementor's full potential
🛑 Get Elementor Pro - wpalgoridm.com/elementor
Signup with DigitalOcean below and get $100 credit
🛑 DigitalOcean - wpalgoridm.com/digitalocean
Get Code Snippet Template discussed in the tutorial
🛑 Snippet source code - wpalgoridm.com/code-snippets/wordpress-menu-icons/
Elementor Flexbox tutorials
🛑Elementor Flexbox basics - kzbin.info/www/bejne/e6C9qaJofsSMgNU
🛑 Elementor Flexbox beyond the basics - kzbin.info/www/bejne/gqCYfomwj7t1nNk
🛑 Design website header using flexbox - kzbin.info/www/bejne/bKLbn6R4n56DlbM
🛑 Build a complete website from the scratch on Digital Ocean -- kzbin.info/www/bejne/rZzKnWmrbt92iqM
Get My Udemy Elementor Custom CSS Course now
🛑 Course Link -- wpalgoridm.com/udemy-css
NEXT STEPS
🛑 Complete Cloudflare tutorial -- kzbin.info/www/bejne/hWmtqKOrmduCo9E
🛑 Create Professional Email -- kzbin.info/www/bejne/iF6kfYN6p9aYpq8
BEST WORDPRESS HOSTING
🔥 SiteGround - wpalgoridm.com/siteground
🔥 DigitalOcean - wpalgoridm.com/digitalocean
BEST WORDPRESS PAGEBUILDERS & ADD-ONS
🛑 Elementor Pro - wpalgoridm.com/elementor
🛑 Dynamic Content For Elementor - wpalgoridm.com/dynamic
🛑 Crocoblock JetPlugins - wpalgoridm.com/crocoblock
🛑 Unlimited Elements - wpalgoridm.com/unlimited
🛑 Ultimate Addons - wpalgoridm.com/uae
🛑 Exclusive Addons - wpalgoridm.com/exclusive
BEST WORDPRESS THEMES
🟦 Astra Pro - wpalgoridm.com/astra
🟦 Neve Pro - wpalgoridm.com/neve
BEST WORDPRESS PLUGINS
🟦 WPForms - wpalgoridm.com/wpforms
🟦 WPVivid - wpalgoridm.com/wpvivid (ENTER “wpalgoridm20” for 20% OFF)
🟦 WP Mail SMTP - wpalgoridm.com/wpsmtp
🟦 MetaBox - wpalgoridm.com/metabox
BEST WORDPRESS SERVICES & TOOLS
🟦 NameCheap - wpalgoridm.com/namecheap
THE TOOLS I USE
🟦 Canva - wpalgoridm.com/canva
🟦 Camtasia - wpalgoridm.com/camtasia
🟦 Adobe Creative Cloud - wpalgoridm.com/adobecc
🟦 Google WorkSpace - wpalgoridm.com/gworkspace
🟦 Freepik - wpalgoridm.com/freepik
🟦 Envato Elements - wpalgoridm.com/envato
** If you want to offer an EXCLUSIVE DISCOUNT to my subscribers, contact me on my website**
Learn WordPress Your Own Way
✅ Website - wpalgoridm.com
✅ Queries - wpalgoridm.com/contact-us
✅ Request A Tutorial - wpalgoridm.com/request
✅ Facebook Page -- wpalgoridm
✅ Facebook Group -- groups/designschoolwp
DISCLAIMER: Some links may contain Affiliate links which help me earn a small commission at no extra cost to you, that helps me make free content in case you buy one above. Thank you for your support!
00:13 Using Elementor
04:07 Using Font Awesome Plugin
#wordpress

[@mirrormirrorenchantedphoto7416]

How do you change the font after making this change? The text and icon are now different from the other text in the menu. Thanks!

[@commandalpha]

Thanks for this video. It did what you said it would!🙌

[@meggokayzee6620]

Thank you so much!! This is exactly what I was looking for!

[@wpalgoridm]

Also elementor recently added menu icons support for top level menu items, but these methods are still gold 🙂

[@hiraimtiaz9238]

PlZ write a code

[@meggokayzee6620]

@@hiraimtiaz9238 There is a link you click in the description which takes you to where the code is. That's where I got it from.

[@sarahzaidan2975]

How to add more space between the icon and the text?

[@wpalgoridm]

Try targeting the icon and add a margin, I think it’s also possible using the menu widget itself.

[@mosipro6632]

excelent!!

[@pixelgap]

Thank you for the info

[@wpalgoridm]

You’re welcome 🙂