Bootstrap 3, how disable auto-added Glyphicon?

Question

I use Bootstrap (v3) with Drupal 8. When I create a button named "Search something", bootstrap adds automatically a "Search" Glyphicon. I do some web searches, but I don't find how "disable" (or hide?) the 'search'auto-added glyphicon of my button.

When I create a sample submit button from a Form Class custom module :

public function buildForm(array $form, FormStateInterface $form_state) {
...
$form['submit'] = [
  '#type' => 'button',
  '#value' => 'Search something',
];    

If I go to the page where there is my form, the button have automatically a magnifying glass glyphicon :

I want display my button without any glyphicon, how can I do that ? I must add a class to my button ? which ?

Thank you !

Answer 1

I have just tested this thing using the Examples module which already provides the sample example form.

Now if you see the example of simple form it will shown,

Code for above image(just submit button part),

 $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];

NOW, if I change the t('Submit') to t('Search something'), so code change will be,

$form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Search something'),
    ];

Now, you can see the out-put image,

Did you surprise..:)...Just changing the String causing this all problem. Now why this is happening, this is all due to Bootstrap theme, ideally it should not happen. Now, if you read the first line of @remy's answer on this question:How can I theme the Bootstrap base theme search block?, it states that,

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

Hence, what is happening, Bootstrap theme taking that Search... word and automatically applying the icons and corresponding classes for color and etc because code has been set-up that way in that theme.

Now, if you do not want to use Search word, it will not show up as shown below,

Now, you can see the BLUE color disappeared, to get that, just add the #button_type, so it again can take appropriate classes. Now see, in following image everything is Ok.

$form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Something'),
      '#button_type' => 'primary',
    ];

Further, you can read that question provided in link, where they have discussed more on this, probably you may get idea to tackle this more in code way, but I think now, you can tackle this as we knew what causes this.

Answer 2

I haven't tried it for Drupal 8, but its works for drupal 7. It should work for drupal 8 as well.

In your bootstrap theme setting, under bootstrap setting there is tab of General setting. Inside that tab the are settings for different bootstrap components. You will see Buttons there. Just open that section and un-check Iconize Buttons option. That's it.

This will disable all the auto icons in buttons.

Answer 3

This works for Drupal 7. In your subtheme's template.php, you can do this :

function YOUR_THEME_bootstrap_iconize_text_alter(&$texts) {
  // We apply the glyphicon ONLY when the element matches "Search"
  $texts['matches'][t('Search')] = 'search'; // The alias of the glyphicon

  // When the element only "contains" the term "Search", it does not apply an icon anymore :
  unset($texts['contains'][t('Search')]);
}

Sorry, I haven't tried for D8.

Answer 4

To disable glyphicons in Drupal 8 (because you are using the Bootstrap theme, or a theme which relies upon Bootstrap theme) simply go to: Home >> Administration >> Appearance >> Appearance settings. Under the Generalize tab on the left there will be options for Buttons. You can uncheck the boxes for Colorize and Iconize.