Archived topic
How to use Font Family GeneratePress for custom search form
5 replies · Started by Alicia on October 13, 2021
Hi!
I've created my own Top Bar by hooking before the header content. I've got custom search form code and a cart link. I'd love to replace the search button with the magnifying glass icon. Because I've created my own search I can't hook into it. Is there a way for me to use the GeneratePress font family that's already installed?
Here's my code:
<div class="search-cart">
<div class="global-search-form">
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field"
placeholder="<?php echo esc_attr_x( 'Search Sacred Lomi', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit"
value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
</div>
<div class="header-cart">
<?php global $woocommerce; ?>
<span class="cart-status"><i class="fas fa-shopping-basket"></i><a href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
$woocommerce->cart->cart_contents_count);?> -
<?php echo $woocommerce->cart->get_cart_total(); ?>
</a></span>
</div>Thanks!
Hi Alicia,
1. Go to customizer > general, make sure the Icon type is set to Font.
2. Change the inputof this line of your code to button:
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
Let me know if it works :)
Hi Ying.
1. I've set Icon type to Font
2. Changed input to button:
<div class="global-search-form">
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field"
placeholder="<?php echo esc_attr_x( 'Search Sacred Lomi', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<button type="submit" class="search-submit"
value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
</div>3. Added this to my CSS:
.global-search-form button[type="submit"].search-submit:before {
content: "";
color: #c0dfe8;
font-size: 1rem;
margin-bottom: 24px;
}I'm still not able to generate the font.
Hi there,
if you change the Icons back to SVG, then you can use the method Tom provides here for your search form:
https://generatepress.com/forums/topic/search-bar-with-an-existing-box/#post-1346252
This line is where the icon is loaded into the button:
<button class="button"><?php generate_do_svg_icon( 'search' ); ?></button>
Yes!!!!!
We have a winner! Oh, you guys are always winners in my book anyway.
This worked perfectly and I've got a snippet gem in my collection!
Thank you for the most amazing theme and support in the WordPress Community!
Awesome - glad to hear that ... and thank you for the amazing feedback :)
