Drupal – ¿Cómo reemplazar el botón de envío de búsqueda con un carácter Font Awesome?

Solución:

Para agregar el nuevo botón de formulario, utilicé hook_form_FORM_ID_alter en mi archivo template.theme en mi carpeta de temas (Aviso: reemplace ThemeName con el nombre de su tema en el siguiente código):

ThemeName.theme:

**
 * Replace the Search Submit Button with a Font Awesome Character.
 */
function ThemeName_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('');
  $form['actions']['submit']['#attributes']['class'][] = 'search-button';
}

Recuerde el uso html_entity_decode() para analizar el código Unicode.
y CSS:

.search-button input[type="submit"]{
    font-family: FontAwesome;
    color: #fff !important;
    display: inline;
    font-size: 18px;
}

1. Para convertir la etiqueta en un texto de marcador de posición, debe usar hook_form_alter en su tema personalizado en Drupal. La identificación del formulario para el cuadro de búsqueda es seach_block_form, por lo que puede usar el siguiente código para hacer esto:

   /**
    * Implements hook_form_alter().
    */
   function hook_form_search_block_form_alter(&$form, &$form_state) {
     $form['keys']['#attributes']['placeholder'][] = t('Search');
   }
   

2. Para cambiar la apariencia del botón de búsqueda, simplemente puede usar CSS. Lo que suelo hacer es establecer el fondo en un icono y usar sangría de texto para ocultar el texto.

Hice lo siguiente en una función de preproceso para agregar íconos de fuentes increíbles. Es un poco difícil con la entrada de búsqueda porque lo único que identifica el botón de búsqueda es la etiqueta. Luego esconde el elemento con el selector .button--text en CSS.

function MYTHEME_preprocess_input(&$variables) {
  $element = &$variables['element'];
  // Ugh :(
  if ($element['#type'] === 'submit' && $element['#value']->__toString() === 'Search') {
    $variables['children'] = $element['#children'];
    $variables['children'][] = [
      '#theme' => 'html_tag',
      '#tag' => 'i',
      '#attributes' => ['class' => ['fa', 'fa-search']],
    ];
  }
}

---

---

Utiliza Nuestro Buscador