In the comments section of How to display custom menu with menu descriptions and icons in a WordPress widget, a user asked:
How would I position them? I’ve replicated what you did in the tutorial, but I can’t get the icons above the text using CSS.
Thanks for your help!
We can automatically generate CSS classes based on WordPress nav menu items labels for the menu items, load Font Awesome and write CSS to display unique icons above the menu items.

Step 1
Add the following in child theme's functions.php:
Fantastic! Thank you, Sridhar!
Make changes on ID of my nav menu ul element but no icon shown.
Have you installed Font Awesome in your theme? The instructions are here: http://fontawesome.io/get-started/
Can you provide the URL of your site?
http://qtm.cookingmeal.website/
The reason for the icons to not appear on your site is because of error in your style.css.
This is what you currently have: https://pastebin.com/raw/nGThUHge
Change it to: https://pastebin.com/raw/CzcPsEgv
You could have found this by doing a bdn test. https://sridharkatakam.com/bdn-test/
how to upload icomoon fonts in genesis header
I have been mulling over on how to upload use icomoon in the header menu? do help, Sridhar… I have tried the code above and altered accordingly for icomoon still no respite
I would like to do this for the secondary-nav menu in Kreativ Pro Theme. I am displaying categories there. What is the set-up for that?
Follow https://sridharkatakam.com/font-awesome-icons-above-menu-items-in-kreativ-pro/
[…] the comments section of How to set up Font Awesome icons above menu items in WordPress, a member […]
Thanks so much! I’ve got it working OK. Is there a way to do this without using pseudo-elements and using the Font-Awesome 5.0 svg version instead? ( I have installed the FontAwesome 5.0 svg js method on my site already, as you suggested in (https://sridharkatakam.com/load-font-awesome-5-wordpress/) along with your filter.)
Right now in the WordPress menu editor I can assign a Font-Awesome class, e.g., fal-fa-tasks. I’m just not sure how to parse the class so the svg icon renders using code. FYI, I can get it to work if I use in the menu item name, but then the styling of the icon itself is tricky.
Here you go. Add this CSS:
(with
<i class="fas fa-paint-brush"></i>added for the first menu item)Detailed answer: https://sridharkatakam.com/font-awesome-5-svg-icons-above-menu-items-in-genesis/
[…] In the past, I wrote a tutorial on How to set up Font Awesome icons above menu items in WordPress. […]