Is it possible to use Font Awesome icons as Menu text?

Support
#1

I want to put a “Home” link in my menu using a Font Awesome image. I tried using a shortcode of [x_icon type=“home”] but it doesn’t get translated, just shows up as plain text. Is this possible to do?

#2

I did some further Google searches and found something that works. Still can’t get a shortcode to work but this works:

<i class=“x-icon x-icon-home” data-x-icon-s="&#xf015;" aria-hidden=“true”></i>

#3

Hi @solarwoods,

The shortcodes do not change into the actual HTML code when added inside the menu item labels. That is why you need to use the actual HTML code which is generated by that shortcode.

Please kindly add the code below as the label of the menu item:

<i class="x-icon x-icon-home" data-x-icon="" aria-hidden="true"></i>

I went to this page:
http://demo.theme.co/integrity-1/shortcodes/icons/

Found the HOME icon, and using the Google Chrome Developer Toolbar copied the HTML code:

Thank you.

2 Likes
#4

Thank you for the quick response. Works great.

#5

Your welcome. In case you want to use Font Awesome Pro, watch this tutorials below:

Hope that helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.