Header Custom Icons

Hello @lisunte,

Generally, you can add SVG icon’s like an image. You can upload the icon to your media gallery. While WP doesn’t natively support SVGs, you can use a plugin to provide support. Then, you can add them as images using HTML or widgets in the header.

https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/

@ghernkadence,

Thank you for your reply.

I can easily create / export my icons in a .svg format.

As you (and the article) points out, WP doesn’t natively support the .svg format.

But, so what? Why couldn’t I use a properly sized .jpg in its place?

I just don’t know how to do this, within the header, in WP / Kadence.

How do I do that using the header controls in WP / Kadence?

Thanks for your time.

This is my site.

Super simple. Just need to add a few custom icons to the top right within the header (these icons will be active – when selected they will trigger other things that happen).

https://21kinetic.com/

(not yet optimized for mobile)

Thanks again.

• This reply was modified 11 months, 1 week ago by lisunte.

Hello @lisunte,

You can add the HTML item to the header and insert the images using the HTML editor. The HTML editor has a button to “Add Media” that should let you add images from your media library.

@ghernkadence,

Thank you.

Is that two different steps?

1. Add HTML item to header
2. Insert the media using the HTML editor

Or just one step; insert media from media library using customize-header-HTML editor-add media?

I know this may seem obvious, but I’m just learning and know nothing about HTML / linking the HTML to other things, etc.

Thank you

Hello @lisunte

It should be in two steps. There is an HTML item you drag from the left side into the header builder. Then, you access the HTML item’s settings to view the UI in the screenshot from my previous message. Then, you can press the “Ade Media” button to add an image from your media gallery, or upload new images.

@ghernkadence,

Works great. Thanks for the help.

One more thing if I can:

When the phone icon is pressed, I’d like it to open a video (the video is actually an audio wave with audio), and the audio should play automatically. I can create the video audio wave / audio:

1. How do enable the mobile icon to launch my video audio wave / audio when pressed.
2. When it launches I don’t want it to take up the entire screen
3. After the video audio wave / audio is done playing, I’d like a contact form to then auto launch (I’ve created a contact form as well)

Thanks for all your help.

Hello @lisunte,

The HTML item only adds HTML to the header. Generally, to open a video when the image is pressed requires JavaScript to open something like a modal.

Free Kadence products don’t have options to help with this task. Using Kadence pro features, you could create a shortcode with a modal and add the shortcode via the HTML item. However, without pro features, there isn’t a way to accomplish your goal without adding code and JS.

Hi there,

This topic has been inactive for more than 2 months. I’ll proceed to marking this as resolved.

If you have further questions or need additional assistance, feel free to start a new topic or refer to our Kadence Theme documentation here: https://www.kadencewp.com/help-center/knowledge-base/kadence-theme/

Thank you for your understanding!
 
Kind Regards,