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

Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 15 May 2018

Dear Sir,

We came across the link to make the changes to Home menu to Home Icon.

https://answers.themler.io/questions/10866/change-home-to-show-an-icon-of-a-house-on-the-navigation-bar?order=Standard

Sample Code

.bd-menu-1 .bd-menuitem-1:first-child > a:before {
  content: '\29e';
  font-family: 'Billion Web Font';
}

Can you please let us know how to achieve this, share some code for our reference. Please.

Regards
Suffian Ahmed

Dear Sir, We came across the link to make the changes to Home menu to Home Icon. https://answers.themler.io/questions/10866/change-home-to-show-an-icon-of-a-house-on-the-navigation-bar?order=Standard Sample Code .bd-menu-1 .bd-menuitem-1:first-child > a:before { content: '\29e'; font-family: 'Billion Web Font'; } Can you please let us know how to achieve this, share some code for our reference. Please. Regards Suffian Ahmed
Vote to pay developers attention to this features or issue.
15 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 15 May 2018

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

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
Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 16 May 2018

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 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
Support Team
Support Team posted this 16 May 2018

Hi,

Use this code for both sites:

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

Sincerely,
Hella

Hi, Use this code for both sites: li.bd-menuitem-36:first-child:before { content: '\29e'; font-family: 'Billion Web Font'; } Sincerely, Hella
Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 16 May 2018

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

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

Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 16 May 2018

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

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

Support Team
Support Team posted this 17 May 2018

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, 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
Malinka
43 Posts
Malinka posted this 17 May 2018

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

menu setting

https://prnt.sc/jiz4yy

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 ![menu setting][1] [1]: https://prnt.sc/jiz4yy https://prnt.sc/jiz4yy

Last edited 17 May 2018 by Malinka

Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 26 May 2018

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, > > 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
Support Team
Support Team posted this 28 May 2018

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

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

Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 28 May 2018

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

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

Support Team
Support Team posted this 28 May 2018

Hi,

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

Sincerely,
Hella

Hi, Nice to hear that the CSS code helped. Feel free to contact us again. Sincerely, Hella
Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 28 May 2018

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

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
Support Team
Support Team posted this 28 May 2018

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

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
Web IT Solutions LLP
283 Posts
Web IT Solutions LLP posted this 28 May 2018

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

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

Support Team
Support Team posted this 29 May 2018

Hi,

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

Sincerely,
Hella

Hi, There is the `::before` pseudoelement inside the `<i>` tag. The icon code is applied to the `::before` element. Sincerely, Hella
You must log in or register to leave comments