add an icon with text on header

This topic has 26 replies, 3 voices, and was last updated 3 years, 11 months ago by Aizaz Imtiaz Awan.

Viewing 27 posts - 1 through 27 (of 27 total)

Author

Posts
May 7, 2021 at 6:52 am #290376

nikosdimitriou
Participant

how to add an icon like the image below?
thanks

Attachments:
You must be logged in to view attached files.

May 7, 2021 at 12:29 pm #290514

Aizaz Imtiaz Awan
Keymaster

Hello,

I saw the screenshot you attached.

You can try adding using the Text/HTML Element in the header and then add the icon with the tag.

Please read the following article for further help:
https://www.w3schools.com/icons/#:~:text=How%20To%20Add%20Icons,color%2C%20shadow%2C%20etc.)

You can take the icons from the following link:
https://fontawesome.com/v4.7.0/cheatsheet/

Best Regards

May 8, 2021 at 6:40 pm #290897

nikosdimitriou
Participant

I have a problem though.
The html code cannot be saved.
I went ahead to increase the PHP vars limit to 5000 but still cannot save the html code no matter how hard I am trying!!

Any idea please?

May 8, 2021 at 6:43 pm #290898

nikosdimitriou
Participant

According to your suggestion, this is the code I am trying:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-heart” style=”color:red;”></i>
</body>
</html>

May 9, 2021 at 8:14 pm #291036

nikosdimitriou
Participant

I am still wondering why we pay for support..
Indeed, I didnt do my homework before buying.
But submitting questions in a forum is the least helpful support. Good for the community though but with so much customisation worldwide, i am finding hard to get a similar solution to my problem.
Still waiting..

May 9, 2021 at 9:25 pm #291071

Elise Noromit
Member

Hello,

I would suggest you a better workaround:

1. Please create HTML block in Dashboard > HTML block: https://xtemos.com/docs/woodmart/html-blocks-2/

2. Add Icon with text element/widget by means of the builder you use in the site.

3. Then insert this HTML block by means of HTML Block built with WPBakery element of the Header builder. HTML Block built with WPBakery is the option to add a custom template created by the builder installed and activated on the site: Elementor or WP bakery page builder. This option may be useful if it is necessary to add a popup or other elements/widgets expanding the header builder features.

If you have any questions please feel free to contact us.

Best Regards

May 10, 2021 at 2:09 pm #291314

nikosdimitriou
Participant

I am sorry but I work with Elementor.
Any workaround using Elementor?
Why I cannot use an HTML block inside the Header builder section? Why it cannot be saved?

May 11, 2021 at 6:47 am #291473

Aizaz Imtiaz Awan
Keymaster

Hello,

It Should save the HTML Block in the header.

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios

May 11, 2021 at 7:10 am #291477

nikosdimitriou
Participant

Yes, it has the html block on the header. I paste the code, hit save but then nothing happens!

You mean to provide the login details of the wp panel here? In public?

Is this a joke? Or what?

May 11, 2021 at 7:46 am #291489

Aizaz Imtiaz Awan
Keymaster

Hello,

Please share admin panel login details in the private content area then they will not be visible publicly.

Regards.
Xtemos Studios

May 11, 2021 at 8:33 am #291501

nikosdimitriou
Participant

Done!
Thanks a lot

May 11, 2021 at 9:59 am #291513

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry but the login details you provide are of limited access. Please provide me with complete admin access to let me help you further.

Best Regards

May 14, 2021 at 6:16 pm #292494

nikosdimitriou
Participant

any luck?

May 16, 2021 at 2:08 pm #292701

Elise Noromit
Member

Hello,

We cannot enter your site, please provide full access and admin rights.

Best Regard

May 17, 2021 at 6:50 am #292872

nikosdimitriou
Participant

The username & password I sent you belong to the administrator.
Can you please send me a screenshot or sth else to understand what is wrong?
Its been a week without any progress.
I still remind you that we pay for support.

May 17, 2021 at 8:15 am #292900

Aizaz Imtiaz Awan
Keymaster

Hello,

I have logged into your website and created an HTML block and added the icon with text as you required and displayed it on the header.

Screenshot for Clarification: https://gyazo.com/9c4e873bf667fbcde0bb2491012b28e3

You can edit the HTML Block and add the icon and text you need.

Best Regards

May 17, 2021 at 8:39 am #292909

nikosdimitriou
Participant

I saw it.
I need the icon to be added at the very top lefte next to «ΔΩΡΕΑΝ ΜΕΤΑΦΟΡΙΚΑ…….»
Thanks

May 17, 2021 at 8:41 am #292911

nikosdimitriou
Participant

Also, how can i make it consistent with the text like same color?
Thanks

May 17, 2021 at 10:22 am #292938

Aizaz Imtiaz Awan
Keymaster

Hello,

I have logged into your website and added the icon with the text you mentioned. Please clear cache and check back.

Screenshot for Clarification: https://gyazo.com/f96efbd3b67fed4307bef5e904b603c1

Best Regards

May 17, 2021 at 12:37 pm #292980

nikosdimitriou
Participant

much appreciate.
job done!
thanks a lot!!

Cause I need to add more icons with text, may I ask how you did it?
I am trying to add an html block but its not saved. Could be the code?
Are you editing through WP or Elementor?

Thanks again for your time!

May 17, 2021 at 1:18 pm #293005

Aizaz Imtiaz Awan
Keymaster

Hello,

You are Most Welcome.

You can use the icons html code from the following links:
https://fontawesome.com/icons?d=gallery&p=2&m=free

And you need to edit the HTML Block with the Elementor page builder then you can edit the text and the icon.

Regards.
Xtemos Studios

May 18, 2021 at 7:10 am #293201

nikosdimitriou
Participant

I am super happy now.Thanks a lot.

One more question please.
How can I change color to separators on Header please? I need to turn them to white so they are visible.
Thanks a lot

May 18, 2021 at 8:29 am #293234
Aizaz Imtiaz Awan
Keymaster
Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.whb-color-dark .wd-header-divider:before {
    border-color: white;
}
```
Regards.
Xtemos Studios
May 18, 2021 at 9:01 am #293239

nikosdimitriou
Participant

how cool!!
thank you so much
appreciate all your efforts and time!!

May 18, 2021 at 9:26 am #293247

nikosdimitriou
Participant

I have added a clickable icon with an hyperlink on the very top right.
But seems to be misaligned.
Any idea why?
Can you correct it for me please?
Screenshot attached.

Thanks

Attachments:
You must be logged in to view attached files.

May 18, 2021 at 9:36 am #293252

nikosdimitriou
Participant

ignore the last post, I managed to fix it.
thanks again

May 18, 2021 at 11:12 am #293283

Aizaz Imtiaz Awan
Keymaster

Hello,

We are Glad that you managed to Resolve the issue yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts