This is not possible with any standard options, however Wordpress does have functions to make this process easier ✅
In > Appearance > Menu's >
You should find a 'Screen Options' at the top-right of your page. From here you choose the 'Advanced menu property' - "CSS Classes" :
Screen Shot 2021-06-27 at 2.10.00 PM.png
Here i have applied the 'Class' 'image-menu-item'
Screen Shot 2021-06-27 at 2.10.12 PM.png
NOTE: You could also apply this same process using "Text Formats" & their potential for custom class names.
Then you would apply the Text Format to the menu-item via:
> Appearance > Customize > Menu style > Primary Menu >
Next some simple jQuery can be used:
https://laytheme.com/documentation.html#custom-javascript - NOTE: Use of "newpage event" & '$' to 'jQuery'.
https://forum.jquery.com/topic/replacing-text-links-with-images
The following Code will need to be added into 'Custom <head> Content' within:
<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery(function(){ jQuery('.image-menu-item a').html('<img src="https://rickei3.dreamhosters.com/wp- content/uploads/2021/03/lilie-von-gruen-susann- zielinski-cursor-f23030-e1616640182583.png"/>') }) }); </script>> Lay Options > Custom CSS & HTML >
Now within this code is a piece:
src="https://rickei3.dreamhosters.com/wp- content/uploads/2021/03/lilie-von-gruen-susann- zielinski-cursor-f23030-e1616640182583.png"This represents the 'source (src)' of your image, we need to input your desired image.
We can do this using the Media LIbrary located in: > Media
Screen Shot 2021-06-27 at 2.37.32 PM.png
When viewing a 'Media Item' it comes with a handy 'File URL'
src="_insert_your_new_file-url_here_"**Copy & Paste this File URL into the images 'src' path:
Also remember to keep your image files very small when doing this otherwise they may cause flicker on page load.
There are many ways im sure you could do this @kl but this is what first came to mind - Hope this helps and have a wonderful day 🌝 Richard