Display header text below icon

Hi
Can you please provide the the CSS code to display the text below the icon. In header editor I have option to display only on right side.

I need similar to the image attached

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-header span.wd-tools-text {
    position: absolute;
    top: 35px;
    left: 5px;
}

.whb-header .wd-tools-element>a {
    width: 90px;
}

Regards.
Xtemos Studios

I have added the css, but it’s not as per the reference image i provided.

1. there is a lot of gap between the icons

2. how to add text below the cart icon?

3. below the account icon can I just add the text “”profile”” instead of the user name ?

Attachments:

You must be logged in to view attached files.

Hello,

1) You can try reducing the gap by reducing the width in the following Custom CSS.

.whb-header .wd-tools-element>a {
    width: 75px;
}

2) Sorry but it is not possible to add text under the cart icon.

3) Sorry but there is no option in Theme Settings available for that.

Best Regards

before buying the theme, I showed the reference image and asked on your sales page.. I was told its possible and I was asked to buy the theme and get help from support.

now after buying your saying I cannot add text below cart and profile 🙁

is there any option to add the text by css or any code ?

Hello,

Please use the below custom CSS code to add the text under the icons:

span.wd-nav-icon.fa.fa-fas.fa-truck:after {
    content: "Track";
    display: block;
    font-size: 8px;
    font-family: -webkit-body;
    margin-top: 16px;
    line-height: 0;
}
.wd-header-my-account.wd-tools-element.wd-event-hover.wd-account-style-icon.login-side-opener a span.wd-tools-icon:after {
    content: "Profile";
    display: block;
    font-size: 10px;
    font-family: -webkit-body;
    margin-top: 8px;
}
.wd-header-wishlist.wd-tools-element.wd-style-icon.wd-with-count a span.wd-tools-icon:after {
    content: "Wishlist";
    display: block;
    font-size: 10px;
    font-family: -webkit-body;
    margin-top: 8px;
}
.wd-header-cart.wd-tools-element.wd-design-5.cart-widget-opener a span.wd-tools-icon:after {
    content: "Cart";
    display: block;
    font-size: 10px;
    font-family: -webkit-body;
    margin-top: 8px;
}

Note: Please change the font size and Font family as per your requirements in the above CSS.

Best Regards

Thanks a lot
But the “track” font alone is different.

How can I have the same font ?

Attachments:

You must be logged in to view attached files.

Hello,

Please use the below custom CSS code instead of the old custom CSS given for Track:

.wd-nav>li>a .wd-nav-icon {
    margin-top: 12px;
}
span.wd-nav-icon.fa.fa-fas.fa-truck:after {
content: "Track";
    display: block;
    font-size: 11px;
    font-family: none;
    line-height: 2.5;
    font-weight: normal;
    text-transform: initial;
}

Best Regards.

Thanks for the help, but can I know the font font name used and how to change it ?

Hello,

I did not use any font, as you can see in the custom CSS that I have used the Font-Family as none or -WebKit-body which used the default font of your site.

If you want to change the font then you can change the font family in the custom CSS as per your requirements.

Best Regards.

Ok, I think I need to use font name as “cabin” right because that’s the font used in my website

Is this correct?

.wd-nav>li>a .wd-nav-icon {
margin-top: 12px;
}
span.wd-nav-icon.fa.fa-fas.fa-truck:after {
content: “Track”;
display: block;
font-size: 11px;
font-family: cabin;
line-height: 2.5;
font-weight: normal;
text-transform: initial;
}

And how to change the track icon? Can I use custom icon. I have uploaded the icon which I want to use.. It would be helpful, if you can guide me how to use.

Attachments:

You must be logged in to view attached files.

Hello,

If you want to replace the truck icon with a custom icon then try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

span.wd-nav-icon.fa.fa-fas.fa-truck:before {
    content: "";
    background-image: URL("https://xtemos.com/wp-content/uploads/2021/08/noun_Truck_2226204.svg");
    position: absolute;
    top: -5px;
    left: auto;
    background-size: contain;
    height: 25px;
    width: 25px;
}

Regards.
Xtemos Studio.

I have added the code, but the icon did not change

am I doing anything wrong?

Attachments:

You must be logged in to view attached files.

Hello,

You have to upload the icon on the site first then use that icon URL in the custom CSS in the background image.

Best Regards.

1.i have already uploaded the icon and using the URL

span.wd-nav-icon.fa.fa-fas.fa-truck:before {
content: “”;
background-image: URL(“https://testing.kathir.biz/wp-content/uploads/2021/08/noun_Truck_2226204.svg”);
position: absolute;
top: -5px;
left: auto;
background-size: contain;
height: 25px;
width: 25px;
}

2. after I log in text under the profile icon is missing.i have added the screenshot for your reference

Attachments:

You must be logged in to view attached files.

Hello,

Please share the WP admin login details of your site so I will check and solve the issue for you.

Best Regards.

ok, i am sharing detail

any update ?

Hello,

1. You can easily change the Truck icon from edit the Menu and use the other font awesome icon which you want to use. The CSS will not work for the menu item: https://ibb.co/Jq9gS1S

2. Your issue has been solved. Now the Profile text is showing fine on the site.

Best Regards.

i checked the font awesome icon but i did not like it.. so is there no option to use my custom icon ?

Hello,

No, there is now way to add a custom icon to the menu from theme options. But yes, you can use any 3rd party plugin for this, please read the below article for this:
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/

Best Regards.

hey, i tried the instruction but the icon size is very big and the text below the icon is missing.. I tried to fix it but its not working… can you please login and fix it for me ?

Attachments:

You must be logged in to view attached files.

i have tried my best.. can you please help me to align the icon and add text below ?

Attachments:

You must be logged in to view attached files.

Hello,

Please use the below custom CSS code:

li#menu-item-2529:after {
    content: "Track";
    display: block;
    font-size: 10px;
    font-family: cabin;
    line-height: 0.2;
    font-weight: normal;
    text-transform: initial;
    text-align: center;
}

.homeicon {
    content: "";
    background-image: URL("https://testing.kathir.biz/wp-content/uploads/2021/08/noun_Truck_2226204.svg");
    position: absolute;
    top: -10px;
    left: auto;
    margin-right: 10px;
    background-size: contain;
    height: 35px;
    width: 35px;
}

Best Regards

thanks a lot sir, it worked perfectly but do you fell the font of “track” is different ?

Attachments:

You must be logged in to view attached files.

and when i hover over all other icon, its changing to blue color but truck icon is not changing to blue color.
is it possible to change color to blue like other icons.

Hello,

To change the Hover style please add the below custom CSS code:

ul#menu-left-menu:hover {
    color: rgba(51,51,51,.6);
    cursor: pointer;
}

The font is the same as the other you can check the font family in all the CSS, all are the same. It is changed may be because of the font size and font-weight.

Best Regards.

I have added the code, but only the text is changing colour but not the icon.

I want the icon also to change colour similar to other icons like cart and wishlist.

[Author]

Posts