Change "Home" Menu to show an Home icon on the navigation bar

Hello Ahmed,

The code provided above should be altered for an individual site since the menu css classes vary.
Could you, please, provide the link to your site?

Thank you,
Gina
Themler Support

Hi Gina,

Yes, Please find the domain list,

http://demo.dinecaters.com/
http://aamcokw.com/

Please kindly share both codes and we will replace it and make it work.

Appreciated your quick response,

Thank in advance,

Regards
Suffian Ahmed

Hi,

Use this code for both sites:

li.bd-menuitem-36:first-child:before {
    content: '\29e';
    font-family: 'Billion Web Font';
}

Sincerely,
Hella

Dear Sir,

We have used the same code above but Not aligned Properly, suppose to come in the same line. Why?

li.bd-menuitem-36:first-child:before {
    content: '\29e';
    font-family: 'Billion Web Font';
}

It supposes to come to first Home Icon and Next to it "HOME" Text in the same horizontal alignment... But, failing and instead of coming at the top...

Home Icon and Home Text suppose to come in the same horizontal line, but coming to Home Icon at top and Bottom "Home" Text Menu. Why? Both should come in the same line. First Home Icon + Home Text Message.

Or the Second option, can we make it only Icon with a biggerer size?

Both we need solutions please...

Check the below link for your reference, please acknowledge the same ASAP one link is LIVE

http://demo.dinecaters.com/
http://aamcokw.com/

Please check the screenshot attached.

Regards
Suffian Ahmed

Last edited 16 May 2018 by Web IT Solutions LLP

li.bd-menuitem-36:first-child:before {
    content: '\29e';
    font-family: 'Billion Web Font';
    float: left;
    margin: 10px;
}

We have added your code, but still having some alignment issue. Are that float and margin missing in your code, please share proper code to refer?

Regards
Suffian Ahmed

Last edited 16 May 2018 by Web IT Solutions LLP

Hi,

Please let me know what is wrong now in more details. I have opened the http://demo.dinecaters.com/ site and the icon looks just fine.

Sincerely,
Hella

Hi

On this site https://goo.gl/Mns5aL i use this css code:

ul.bd-menu-15 .fa::before {
    color: #fff;
    float: left;
    margin: 14px 0 0 21px;
    width: 13px;
}
ul.bd-menu-15, ul li.fa.fa-lg a {
    font-size: 13px;
}
ul.bd-menu-15 > :first-child span {
    display: block;
    text-indent: -999em !important;
}

And also add css class to specific menu in wordpress menu: fa fa-lg fa-home

https://prnt.sc/jiz4yy

Last edited 17 May 2018 by Malinka

Hi,

Use this code for both sites:

li.bd-menuitem-36:first-child:before {
    content: '\29e';
    font-family: 'Billion Web Font';
}

Sincerely,
Hella

Dear Hella,

My home icon vanished from my website suddenly, please check it and let me know what was the issue ?

URL - http://dinecaters.com/home.html

And, how to find out the icon code (Ex. content: '\29e';) ?

Bit urgent, please help me.

Regards
Suffian Ahmed

Hi,

Please try adding text-transform: none; property in addition to existing code.
This may help.

In order to find the icon values you can inspect icons here:
http://answers.themler.io/articles/3942/icons-shortcode

Thank you,
Olivia

Last edited 28 May 2018 by Support Team

Yes but how to find the code from the below URL

http://answers.themler.io/articles/3942/icons-shortcode

Ex. content: '\29e'; (this is for the home icon, but from the link, I am not getting this content code)? Like '\29e' and '\30e' etc...

And, text-transform: none; is working fine... Thank you Olivia.

Regards
Suffian Ahmed

Last edited 28 May 2018 by Web IT Solutions LLP

Hi,

Nice to hear that the CSS code helped. Feel free to contact us again.

Sincerely,
Hella

Yes but how to find the code from the below URL

http://answers.themler.io/articles/3942/icons-shortcode

Ex. content: '\29e'; (this is for the home icon, but from the link, I am not getting this content code)? Like '\29e' and '\30e' etc...

How to find the short code of the icons ????

Regards
Suffian Ahmed

Hi,

The shortcodes for the icons cannot be inserted as the menu item name. Those shortcodes can be used in the content only where you can insert the HTML code. In your case you need to use that solution with the CSS code. The link with the shortcodes will only help you to find the digital code of the desired icon.

Sincerely,
Hella

No no, I mean in the link there are icons and text, but shortcode is not there in the CSS Code Inspect..?

Check the screenshot for reference...

Regards
Suffian Ahmed

Last edited 28 May 2018 by Web IT Solutions LLP

Hi,

There is the ::before pseudoelement inside the <i> tag. The icon code is applied to the ::before element.

Sincerely,
Hella

Super instructions, thank you. Is it possible to hide the main text in order to see only the icon? Is it possible to add an icon for another image? Home icons in http://answers.themler.io/articles/3942/icons-shortcode are not much used.

Hello, is that working with themler plugin http://webnoesys.com and https://anandguru.live please do check the domains listed here, we are converting this themler project with WordPress. thank you.