Drupal Bootstrap: Add magnifying glass search icon to search button and change placeholder text

Out of the box the search button uses the word 'search', but I want to change this so it displays the magnifying glass Glyphicon instead. Also, I want to change the placeholder text from 'search' to something else.

search

To add the icon in our search button we need to us override bootstrap_bootstrap_search_form_wrapper(). We can do this by placing the following code in our theme's template.php file:

<?php
/**
 * Implements hook_bootstrap_search_form_wrapper();
 */
function THEMENAME_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">';
 
$output .= '<i class="icon glyphicon glyphicon-search" aria-hidden="true"></i>';
 
$output .= '</button>';
 
$output .= '</span>';
 
$output .= '</div>';
  return
$output;
}
?>

To change the placeholder text we can use hook_form_alter():

<?php
/**
 * Implements hook_form_BASE_FORM_ID_alter();
 */
function THEMENAME_form_search_form_alter(&$form, &$form_state, $form_id) {
 
$form['basic']['keys']['#attributes']['placeholder'] = t('Search this awesome site');
}
?>

Our search form should now look like this:

search