Font Awesome Icons in Menu Problem

Hi, I currently have fa icons in my top menu, however when I mouse over them they look like this:

Is there anyway to modify this?

Use CSS to add them instead of pasting them into menu item name.

Check view a source code of your page to find ID of each menu item and then:

#menu-item-<strong>XXXX</strong> a:before {
 font-family: fontawesome;
 content: '<strong>\YYYY</strong>';
}

Instead of XXXX place ID of your menu item and intead of YYYY place fontawesome ID: https://fortawesome.github.io/Font-Awesome/icons/



Doesn’t seem to be working?

(backslash in second pic is there before the fa ID, I tested after I saw the pic)

Gah! Sorry! I wanted to make XXXX and YYYY bold so I used strong attribute but of course you shouldn’t use it.

My fault, sorry for the confusion.

In your case it should look like this:

#menu-item-27 a:before {
 font-family: fontawesome;
 content: '\f015';
}

This should work.

Thanks a lot! I should have noticed that too to be honest…

Hi There,

I hope you are well today and thanks for posting here.

It’s the known issue that will be resolved in the future version of Sparkling theme.

In the meanwhile to resolve the issue you can use the solution posted in the following reply.

https://colorlibsupport.com/t/wrong-title-attribute-menu-with-font-awesome-icons/#post-27746

Best Regards,
Movin