How can I theme the Bootstrap base theme search block? [duplicate]

Question

I've created a sub-theme of the Drupal 8 Bootstrap base theme. My problem is that I'm using a customized version of the Bootstrap CSS Framework that does not include Glyphicons. Instead of Glyphicons, my project is using fontAwesome icons. What I've realized though, is that the Bootstrap theme uses a Glyphicon Search Icon for the Search Form. Since I'm not using glyphicons and the CSS files are not included, I get a search form button that looks like this.

It should appear like this.

If i inspect the HTML markup using my browser, my theory is correct.

<button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name=""><span class="sr-only">Search</span><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></button>

if I change the following markup, the button shows up correctly because it can find the icon.

 <span class="icon glyphicon glypicon-search"></span> to <span class="fa fa-search"></span>

What I want to do is to be able to change the icon or the code in the base theme that generates this snippet of code.

<span class="icon glyphicon glypicon-search"></span> 

My assumption is that I should use a preprocess function to alter the form block and output/replace the Glyphicon span with the Fontawesome span.

I believe that the input--button.html.twig in the bootstrap base theme is responsible for outputting the icon classes because of this code.

{% block input %}
    {% if icon_only %}
      <button{{ attributes.addClass(classes, 'icon-only') }}>
        <span class="sr-only">{{ label }}</span>
        {{ icon }}
      </button>
    {% else %}
      {% if icon_position == 'after' %}
        <button{{ attributes.addClass(classes) }}>{{ label }}{{ icon }}</button>{{ children }}
      {% else %}
        <button{{ attributes.addClass(classes) }}>{{ icon }}{{ label }}</button>{{ children }}
      {% endif %}
    {% endif %}
    {{ children }}
  {% endblock %}

Apparently, it is used to alter the button of many elements instead of only the search form.

Answer 1

Bootstrap theme is deeply bundled with glyphicons .. it guesses the icon from the button text.

You would need to override Bootstrap::glyphiconFromString() or Bootstrap::glyphicons(). I cannot tell you how to do this in your subtheme ...

If you removed the glyphicons, probably Theme::hasGlyphicons() will return FALSE and won't show any icon.

Workaround

You could replace the icon variable in template_preprocess_input, like:

function MY_TEME_preprocess_input(&$variables) {
  if ($variables['icon']) {
    if (array_key_exists('glyphicon-search', $variables['icon']['#attributes']['class'])) {
     foreach($variables['icon']['#attributes']['class'] as &$sValue)
     {
       if ($sValue == 'glyphicon') {
         $sValue = 'fa';
       }
       if ($sValue == 'glyphicon-search') {
         $sValue = 'fa-search';
       }
     }
    }
  }
}

or, I guess you have asked this question on do: https://www.drupal.org/node/2757463. There is a suggestion of overwriting the Input element:

Create a file at bootstrapsubtheme/src/Plugin/Preprocess/Input.php and add the following:

/**
 * @file
 * Contains \Drupal\bootstrapsubtheme\Plugin\Preprocess\Input.
 */

namespace Drupal\bootstrapsubtheme\Plugin\Preprocess;

use Drupal\bootstrap\Annotation\BootstrapPreprocess;
use Drupal\bootstrap\Utility\Variables;

/**
 * Pre-processes variables for the "input" theme hook.
 *
 * @ingroup theme_preprocess
 *
 * @BootstrapPreprocess("input")
 */
class Input extends \Drupal\bootstrap\Plugin\Preprocess\Input {

  /**
   * {@inheritdoc}
   */
  public function preprocessElement(Variables $variables, $hook, array $info) {
    $element = $variables->element;

    if ($element->icon) {
      $element->icon->replaceClass('glyphicon', 'fa');
      $element->icon->replaceClass('glyphicon-search', 'fa-search');
    }

    // Let bootstrap base theme preprocess the element normally now.
    parent::preprocessElement($variables, $hook, $info);
  }

}

Answer 2

Adapted from @remy's Answer. Using $variables['icon'] wasn't working so i tried drilling down a little deeper into the variable array and i was able to change the icon to a font-awesome icon. The preprocess function was added to my themes, .theme file.

Let me know if there is a better/ more concise approach. Currently, i only need to change 1 icon, but what if there are 20 icons? (This solution might get pretty busy quickly).

  function MYBOOTSTRAPTHEMENAME_preprocess_input(&$variables) {

  $glyphiconclass = $variables['icon']['#attributes']['class'][1];
  $glyphiconname = $variables['icon']['#attributes']['class'][2];

    if (($glyphiconclass == 'glyphicon') and ($glyphiconname == 'glyphicon-search')) {
       $variables['icon']['#attributes']['class'][1] = 'fa';
       $variables['icon']['#attributes']['class'][2] = 'fa-search';
    }

  }

Answer 3

It is important that you should BY DEFAULT always have the bootstrap theme enabled, but be working from a subtheme. Look in the templates/bootstrap folder and look for a file named bootstrap-search-form-wrapper.func.php. Copy that file to your default theme. and you can then modify it to use Fontawesome rather than the glyphicon.