How to display some main menu items as icons in header?

[mdmason23]

Hello,

I would like some of the menu items in my main header to display the navigation label and others to display an icon like on the following website:

Déja Spoon

In the past, I have just used a shortcode as the navigation label and it worked great. So, instead of using a navigation label, I’ve entered the shortcode [font_awesome icon=“facebook”], and the Facebook icon would appear in the menu.

This is not working for me in X-theme. I have tried enabling the graphic display for the menu item and choosing the Facebook icon, but my navigation label is what appears on the website, not the icon I chose. The following is the website header that I am trying to update to look like the one above:

Home - Pathways Family Coaching

I did see another post in the forum that included the use of the X Pro header builder, but I was hoping that I would not have to upgrade to pro and that there would be a much simpler solution. Please help.

Thanks!

[paul.r]

Hi,

You can use the code below to display an icon in your menu. Add it as navigation label.

<i class="x-icon x-icon-adjust" data-x-icon="&#xf001;" aria-hidden="true"></i>

You just need to change the class and data-x-icon to display a different icon.

For data-x-icon you refer to this cheatsheet - https://fontawesome.com/cheatsheet

For example, if you want to display an anchor icon, you can use the following code

<i class="x-icon x-icon-anchor" data-x-icon="&#xf13d;" aria-hidden="true"></i>

or balance scale icon

<i class="x-icon x-icon-balance-scale" data-x-icon="&#xf24e;" aria-hidden="true"></i>

Hope this helps

[mdmason23]

@paul.r

<i class=“x-icon x-icon-anchor” data-x-icon=“” aria-hidden=“true”></i>

This just displays &#f142 in my header now (which is the envelope code)

[mdmason23]

My mistake…when I copy the code, a little box replaces the icon code…kinda like this… “”. I forgot the semi-colon when I corrected the code, and that’s when the code appeared in the header.

The data-x-icon code keeps being replaced by a little box in the navigation label of my menu item, and just 3 stacked dots appear on the website header.

Is there anything else I can try?

[friech]

Hi @mdmason23,

As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

data-x-icon-b for social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.

Example: Facebook icon
<i class="x-icon" data-x-icon-b="&#xf082;" ></i>

Don’t mind if the icon turns  on the backend, on the frontend it should turn to FontAwesome icon properly.

Hope it helps,
Cheers!