Add icon as menu item in FSE

Hi @goutm

> Is it possible to use icon instead of a text in menu item? There’re are several ways described in internet, but non actually work.

The display and layout of the menu items are something that is controlled by the theme you are using on the site. What is the name of the current theme you are using on your site?

The Gutenberg plugin is a page editor, this means that it works for adding content to your pages and posts. However, depending on the theme you are using there might be a way of having menu items as icons.

Hej @thelmachido

I suppose the “problem” is rather FSE- than theme dependent. I’m not sure, but it seems to me because in FSE (I use standard Twenty Twenty Two theme) the way you customize a menu has been changed completely. But as it can be found in internet, there was enough to put “<i class=”fa-brands fa-vk”></i>” instead of menu item text — and that worked. But it is not when I edit menu items in FSE.

Heya @goutm, thanks for clarifying that you’re using FSE and Twenty Twenty-Two.

the way you customize a menu has been changed completely

That’s right. Menu editing in block themes that support FSE is different than in classic themes that do not support FSE. Instead of creating and editing menus in the Customizer, in FSE themes there’s a Navigation block. You can learn more about the Navigation Block here.

Have you tried putting your custom Font Awesome class in the “Additional CSS class” area for the menu item?

Here’s an example:

If that doesn’t work, I’d suggest you ask the Font Awesome folks if they have plans to make their plugin compatible with block themes (FSE):

https://www.ads-software.com/support/plugin/font-awesome/

@zoonini thanks — I tried to use additional class in a different way — I was suggested to put the whole construction <i …. there (like was suggested by some internet video and some people in community) — and it didn’t work.

Right.

Your suggestions did some job, thank you! But maybe you will also have some thoughts about this.

It seems to me now that the way menu items work is that a tex is the only clickable zone for the url specified.

I can’t add a link with additional class, because it won’t show in the menu, so I tried to add 1 space (just with spacebar). And it showed the icon, but you can’t click on it, unfortunately.
(add) https://snipboard.io/GqYSOm.jpg
(result) https://snipboard.io/TGmuAC.jpg

So, it seems like that an icon supposed to be complimentary to a text, but unfortunately it changes text style completely:
(add) https://snipboard.io/HbzZK5.jpg
(result) https://snipboard.io/LOcp9Q.jpg

Well, still in search of a solution )

@goutm Glad you were able to get the Font Awesome icons added to your menu.

thanks — I tried to use additional class in a different way — I was suggested to put the whole construction <i …. there (like was suggested by some internet video and some people in community) — and it didn’t work.

Only the class name itself goes into the Additional CSS class box, not the HTML portion.

As for getting the words and icons clickable in the specific way you want, I think this would be more of a question for the Font Awesome plugin folks to help with directly, so I’d suggest you go ahead and ask for help in their forum. Hopefully they can lend a hand!

I’ll mark this thread as resolved since your initial issue of getting the icons to show up in the menu has been resolved.