Search Overlay icon

Feature Requests / Improvements
1

Bricks Version: 1.9.5

Browser: Opera
OS: Windows
URL: N/A

Is this a bug? The search overlay does not output the custom icon next to the input.

Result

image
image1873×861 8.24 KB

Control settings

image
image407×657 23.1 KB

searchform.php allows for $icon

if ( $icon || $button_text ) {
		if ( $aria_label ) {
			echo '<button type="submit" aria-label="' . esc_attr( $aria_label ) . '">' . $icon . $button_text . '</button>';
		} else {
			echo '<button type="submit">' . $icon . $button_text . '</button>';
		}
	}
2

The $icon is only included in $settings if Search Type: Input

Array ( [searchType] => input [_cssGlobalClasses] => Array ( [0] => blrlsw ) [buttonAriaLabel] => Search [ariaLabel] => Toggle Search [icon] => Array ( [library] => svg [svg] => Array ( [id] => 197 [filename] => search.svg [url] => https://mywebsite.local/wp-content/uploads/2024/01/search.svg ) ) )

3

Hi @mizzinc,

Not a bug, the icon control controls the icon that “opens” the overlay.

1 Like
4

Thanks.

For anyone else who wants the $icon in the overlay.

Copy searchform.php to your child theme

Insert the below code before $search_text = !..

if ($settings['searchType'] == 'overlay') {
    if (empty($settings['icon']) || !is_array($settings['icon'])) {
        $settings['icon'] = array(
            'library' => 'svg',
            'svg' => array(
                'id' => 197,  /* update that this ID with the ID of your icon in Media library */
                'filename' => 'replace-with-icon-filename.svg', /* search.svg */
                'url' => 'https://yourwebsite.com/wp-content/uploads/2024/01/search.svg', /* update url */
            ),
        );
    }
}