# Font Awesome Icons in Menu Problem

**URL:** <https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420>\
**Category:** Sparkling\
**Created:** [November 22, 2015, 3:40pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420 "2015-11-22T15:40:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![theonlytermin](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/97f17d/32.png) [@theonlytermin](https://colorlibsupport.com/u/theonlytermin)\
**Post date:** [November 22, 2015, 3:40pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/1 "2015-11-22T15:40:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![szponix](https://colorlibsupport.com/user_avatar/colorlibsupport.com/szponix/32/3163_2.png) [@szponix](https://colorlibsupport.com/u/szponix)\
**Post date:** [November 22, 2015, 4:33pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/2 "2015-11-22T16:33:27Z")

</div>

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:

```auto
#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/](https://fortawesome.github.io/Font-Awesome/icons/)

---

<div class="post-metadata">

**Author:** ![theonlytermin](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/97f17d/32.png) [@theonlytermin](https://colorlibsupport.com/u/theonlytermin)\
**Post date:** [November 22, 2015, 7:10pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/3 "2015-11-22T19:10:05Z")

</div>

Doesn’t seem to be working?

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

---

<div class="post-metadata">

**Author:** ![szponix](https://colorlibsupport.com/user_avatar/colorlibsupport.com/szponix/32/3163_2.png) [@szponix](https://colorlibsupport.com/u/szponix)\
**Post date:** [November 23, 2015, 5:37pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/4 "2015-11-23T17:37:48Z")

</div>

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:

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

```

This should work.

---

<div class="post-metadata">

**Author:** ![theonlytermin](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/97f17d/32.png) [@theonlytermin](https://colorlibsupport.com/u/theonlytermin)\
**Post date:** [November 23, 2015, 7:17pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/5 "2015-11-23T19:17:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [December 9, 2015, 12:01pm UTC](https://colorlibsupport.com/t/font-awesome-icons-in-menu-problem/8420/6 "2015-12-09T12:01:19Z")

</div>

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](https://colorlibsupport.com/t/wrong-title-attribute-menu-with-font-awesome-icons/#post-27746)

Best Regards,  
Movin