Drupal Bootstrap base theme override search button icon with text
Photo by ~ Perfectillusion, Etsy Shop

I love Drupal and I love Bootstrap, and the Drupal Bootstrap Base Theme bridges the gap between them nicely, it coats everything with elements from the Bootstrap framework. It uses a Bootstrap glyph icon for the search button, which is nice, however on some projects I had to put back the text “Search” instead of the icon. The following code snippet does exactly that.

I found that the best way to do this to override the bootstrap_search_form_wrapper in your theme’s template.php file.

Drupal Bootstrap base theme search button icon override with text

 

/**
 * Theme function implementation for bootstrap_search_form_wrapper.
 */
function YOURTHEME_bootstrap_search_form_wrapper($variables) {
  $output = '<div class="input-group">';
  $output .= $variables['element']['#children'];
  $output .= '<span class="input-group-btn">';
  $output .= '<button type="submit" class="btn btn-default">';
  // We can be sure that the font icons exist in CDN.
  if (theme_get_setting('bootstrap_cdn')) {
    $output .= _bootstrap_icon('search');
  }
  else {
   // Use the following line instead IF statement to display Text
    $output .= t('Search');
  }
  // For Screen Readers in case you use the glyphicon
  $output .= '<span class="sr-only">Search</span></button>';
  $output .= '</span>';
  $output .= '</div>';
  return $output;
}

 

The code snippet adds “Search” as text after the magnifying glass glyphicon, for screen readers, needed for 501 compliance.