Bug: Not able to get Fontawesome icon working with Full Site Editing in WordPress (in tutorial)

[paaljoachim]

Bug description

Hi

I have this tutorial. (Linked to the site Full Site Editing part.) https://easywebdesigntutorials.com/adding-icons-to-your-menus/#site-editor

Adding Font Awesome to the regular classic themes in WordPress works fine, but it is not working correctly with Full Site Editing.I added this issue to Gutenberg but it was closed because it is outside the editor. https://github.com/WordPress/gutenberg/issues/44725 Font Awesome adds its own font family also to the menu link.

If I could get some help figuring this out then I can also adjust the tutorial making it easier for others to also do this correctly.

Thank you!

I am wondering if this is associated: https://github.com/FortAwesome/Font-Awesome/issues/14648

Reproducible test case

https://bluewinddesign.com/

Screenshots

Font Awesome adds the font family to icon and the menu link. I need it to only add it to the icon and not the menu link.

Font Awesome version

6.0.2

Serving

Self-hosted

Implementation

CSS

Browser and Operating System

Brave OSX

Web bug report checklist

• [X] I have included a test case because my odds go way up that the team can fix this when I do
• [X] I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I do not think this is a bug, because fa-solid fa-icon classes have been added to the external <li> and the CSS is honoring that behavior.

There correct approach would be to have a span element inside the menu, and the classes should be applied to the aforementioned element.

If this is not possible with the Full Side Editor, then probably some custom logic should be implemented at component level

I'm asking @mlwilkerson if he has some thoughts

[paaljoachim]

Hi @tagliala Geremia.

Thank you for your followup! It is much appreciated! It is as you say likely not a bug, but I did not know what to call it. I just know that I am not able to get it working correctly with Full Site Editing in WordPress and need some advice on how to get it working correctly. This way we can use Font Awesome icons in the up and coming Full Site Editing in WordPress. Thanks for also pinging Mike!

[beyond9thousand]

Please mark as closed if resolved

[simone80an]

Maybe it's not a perfect solution but for me it works, just add the css of your fonts theme to the navigation item. Eg. for Pixl theme im using:

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--dm-mono)!important; font-size: 0.875rem!important; font-weight: 300!important; }