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

Web IT Solutions LLP
237 Posts
Web IT Solutions LLP posted this 2 weeks ago

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.
8 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 2 weeks ago

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
237 Posts
Web IT Solutions LLP posted this 2 weeks ago

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 2 weeks ago

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
237 Posts
Web IT Solutions LLP posted this 2 weeks ago

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 2 weeks ago by Web IT Solutions LLP

Web IT Solutions LLP
237 Posts
Web IT Solutions LLP posted this 2 weeks ago

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 2 weeks ago by Web IT Solutions LLP

Support Team
Support Team posted this 2 weeks ago

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 2 weeks ago

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 2 weeks ago by Malinka

Web IT Solutions LLP
237 Posts
Web IT Solutions LLP posted this 18 hours ago

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
You must log in or register to leave comments