How to replace the search submit button with a Font Awesome character?

Question

I would like to replace the search submit button with a Font Awesome character like the Magnifier (Search Icon) character, and put Search the site inside the search box.

How can I achieve something like this?

Answer 1

In order to add the new form button, I used hook_form_FORM_ID_alter in my template.theme file in my theme folder (Notice:replace ThemeName with the name of your theme in below code):

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';
}

Remeber use html_entity_decode() to parse the Unicode code.
and CSS:

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

Answer 2

1. To convert the label to a placeholder text, you need to use hook_form_alter in your custom theme in Drupal. The form id for the search box is seach_block_form, so you can use the following code to do this:

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

2. To change the look and feel of the search button, you can simply use CSS. What I usually do is to set the background to an the icon and use text-indent to hide the text.

Answer 3

I've done the following in a preprocess function to add font-awesome icons. It's a bit difficult with the search input because the only thing that identifies the search button is the label. Then hide the element with the selector .button--text in 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']],
    ];
  }
}

Answer 4

Instructions for Drupal 8 / FontAwesome 5

Create a YOUR_THEME_NAME_HERE.THEME file and place it in your themes directory (ie. your_site_name/themes/your_theme_name)

Paste this into the file, it is PHP code to find the Search Block and change the value to the UNICODE for the FontAwesome icon. You can find other characters at this link https://fontawesome.com/cheatsheet.

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
}
?>

Open the CSS file of your theme (ie. your_site_name/themes/your_theme_name/css/styles.css) and then paste this in which will change all input submit text to FontAwesome. Not sure if this will work if you also want to add text in the input button though for just an icon it is fine.

Make sure you import FontAwesome, add this at the top of the CSS file

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

then add this in the CSS

input#edit-submit {
    font-family: 'Font Awesome\ 5 Free';
    background-color: transparent;
    border: 0;  
}

FLUSH ALL CACHES AND IT SHOULD WORK FINE

Add Google Font Effects

If you are using Google Web Fonts as well you can add also add effects to the icon (see more here https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta). You need to import a Google Web Font including the effect(s) you would like to use first in the CSS so it will be

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

Then go back to your .THEME file and add the class for the 3D Float Effect so the code will now add a class to the input. There are different effects available. So just choose the effect you like, change the CSS for the font import and the change the value FONT-EFFECT-3D-FLOAT int the code below to font-effect-WHATEVER_EFFECT_HERE. Not effects are still in Beta and don't work in all browsers so read here before you try it https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
  $form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>

Answer 5

For Drupal 8 / FontAwesome 5 (other similar solutions above did not work)

If you have the fontawesome module already installed you can add to your THEMENAME.theme file

use Drupal\Component\Render\FormattableMarkup;

function THEMENAME_form_search_block_form_alter(&$form, &$form_state) {
    $form['keys']['#attributes']['placeholder'][] = t('Search');
    $value = new FormattableMarkup('<i class="fas fa-search"></i>@text', ['@text' => '',]);
    $form['actions']['submit']['#value'] = $value;
}

Answer 6

Changes must be made in the yourtheme.theme file in your yourtheme directory. The following changes the submit button text.

function yourtheme_form_search_block_form_alter(&$form, &$form_state) {
  $form['actions']['submit']['#value'] = t('Zoeken');
}

Answer 7

If you use boostrap subtheme and drupal you can remove glyphicon in settings theme for all buttons BUT you can remove glyphicon for specific button with this hook in your TEMPLATE.theme https://drupal-bootstrap.org/api/bootstrap/bootstrap.api.php/function/hook_bootstrap_iconize_text_alter/7

function YOURTEMPLATENAME_bootstrap_iconize_text_alter(array &$texts) {
  // use ksm($form) OR other dump($form) functions
  if($texts['contains']['YOURTEXT']) {
    unset($texts['contains']['YOURTEXT']);
  }
}

if you want to show the title of the button, you must copy the file bootstrap/src/Plugin/Form/SearchForm.php into your SUBTHEME

YOURSUBTHEME/src/Plugin/Form/SearchForm.php copy and paste the content of the file into your file and edit the content like that :

<?php
...
use Drupal\bootstrap\Plugin\Form\FormBase;
...

  public function alterFormElement(Element $form, FormStateInterface $form_state, $form_id = NULL) {
    $form->advanced->setProperty('collapsible', TRUE);
    $form->advanced->setProperty('collapsed', TRUE);
    $form->basic->removeClass('container-inline');
    $form->basic->submit->setProperty('icon_only', FALSE);
    $form->basic->keys->setProperty('input_group_button', TRUE);
  }
}

with this you will see the text "search" only and no glyphicon on your search button

don't forget to flush the cache !

Answer 8

You can do it inside a twig template YOURTHEME/templates/input/input--button.html.twig

Add this above the lines where <button> is rendered:

{# replace Glyphicon with FontAwesome for Search #}
{% if icon and icon['#attributes']['class']|join matches '/search/' %}
  {% set icon = {
    '#type': 'html_tag',
    '#tag': 'i',
    '#attributes': {
      'class': [
        'fa', 'fa-search'
      ],
      'aria-hidden': 'true'
    },
  } %}
{% endif %}

It will replace the default icon object, adding an <i> tag with FontAwesome CSS classes.

You can check the icon object defaults using dump:

{{ dump(icon) }}