Return to previous page

Custom SVG path in search icon - by Esbyz

This topic has 12 replies, 2 voices, and was last updated 3 years, 11 months ago ago by Rose Tyler

Esbyz

Participant

May 23, 2020 at 01:01

Hello,
is it possible to change the search icon for the header to a custom svg? like the other icons (wishlist, cart etc.) why is it not possible for the search bar?

#238470 Copied Theme version: v.6.3.4 WooCommerce version: 4.1.1

11 Answers

Rose Tyler

Support staff

May 23, 2020 at 06:15

Hello,

Submit your request here https://www.8theme.com/taskboard/ Our team will discuss it and maybe implement it in one of the next theme updates.

Regards

#238481 Copied

Esbyz

Participant

May 23, 2020 at 10:33

Is there really no way to change the icon?

#238495 Copied
Rose Tyler

Support staff

May 23, 2020 at 10:53
It requests additional customization which is not included in our support.
Here is an example of code that you can be added in functions.php of your child theme –
```
add_filter('et_b_search_icon', function() {
	    ?>
	     // your svg here
	    <?php
    });
```
Regards
#238498 Copied
Esbyz

Participant

May 23, 2020 at 14:55

Thanks for your answer, could you please give me an example for the tag with // your svg here, i dont know what argument i should write in.

#238518 Copied

Rose Tyler

Support staff

May 23, 2020 at 15:05

Just code of SVG icon, like code in Theme Options.
Change this line http://prntscr.com/smcv0j to custom icon SVG code.

Regards

#238521 Copied
Esbyz

Participant

May 23, 2020 at 15:17
The icon changes but the search function is not working anymore, used this:
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    etheme_child_styles();
}

add_filter('et_b_search_icon', function() {
        ?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
    <g>
        <path d="M50,57.6c-14.4,0-26.1-11.7-26.1-26.1S35.6,5.4,50,5.4s26.1,11.7,26.1,26.1S64.4,57.6,50,57.6z M50,13.4
            c-10,0-18.1,8.1-18.1,18.1S40,49.6,50,49.6s18.1-8.1,18.1-18.1S60,13.4,50,13.4z"/>
    </g>
    <g>
        <path d="M90.4,94.6c-1.3,0-2.6-0.7-3.4-1.9c-7.7-12.1-21.9-19.6-37-19.6s-29.3,7.5-37,19.6c-1.2,1.9-3.7,2.4-5.5,1.2
            s-2.4-3.7-1.2-5.5C15.4,74,32.1,65.1,50,65.1S84.6,74,93.8,88.4c1.2,1.9,0.6,4.3-1.2,5.5C91.9,94.4,91.1,94.6,90.4,94.6z"/>
    </g>
</g>
</svg>

        <?php
    });
```
#238524 Copied
Rose Tyler

Support staff

May 23, 2020 at 15:33

Provide URL of your site, temporary wp-admin and FTP access, we will take a closer look.

Regards

#238528 Copied

Esbyz

Participant

May 23, 2020 at 20:00

Okay, thank you!

Please contact administrator
for this information.

#238547 Copied

Rose Tyler

Support staff

May 24, 2020 at 07:20

Hi,

What about FTP access?

Regards

#238560 Copied

Esbyz

Participant

May 24, 2020 at 13:49

Hello, yes i have attached the login data.

Please contact administrator
for this information.

#238612 Copied

Rose Tyler

Support staff

May 25, 2020 at 07:25

Hello,

Please check the icon now – https://prnt.sc/sn72aa

Regards

#238671 Copied
Viewing 12 results - 1 through 12 (of 12 total)