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

Web IT Solutions LLP
234 Posts
Web IT Solutions LLP posted this 5 days 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.
7 Comments
Order By: Standard | Newest
Malinka
43 Posts
Malinka posted this 3 days 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 3 days ago by Malinka

Support Team
Support Team posted this 3 days 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
Web IT Solutions LLP
234 Posts
Web IT Solutions LLP posted this 4 days 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 4 days ago by Web IT Solutions LLP

Web IT Solutions LLP
234 Posts
Web IT Solutions LLP posted this 4 days 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 4 days ago by Web IT Solutions LLP

Support Team
Support Team posted this 4 days 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
234 Posts
Web IT Solutions LLP posted this 5 days 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 5 days 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
You must log in or register to leave comments