5

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 :

enter image description here

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

Thank you !

  • Instead of '#type' => 'button', did you check '#type' => 'submit'? – CodeNext Oct 22 '16 at 17:50
  • Same result with 'submit' :) – matthieu lopez Oct 22 '16 at 17:51
  • but, why there is no array in your code, it is supposed to be $form['submit'] = array(....). – CodeNext Oct 22 '16 at 18:15
  • "[ ]" is same thing ;) – matthieu lopez Oct 22 '16 at 18:18
  • 1
    I found the issue and why it is showing, now let me ask you just one thing, Do you need Search something word there or you are planning to add something else? – CodeNext Oct 22 '16 at 19:49
3

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,

enter image description here

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,

enter image description here

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,

enter image description here

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',
    ];

enter image description here

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.

  • Thanks fot this detailed answer :) I tested with "'#button_type' => 'primary" but the magnifying glass is always here... I thinked me too about twig template. But, as you say, changing there will change at every place.. – matthieu lopez Oct 22 '16 at 18:17
  • I hide the added span (contain the glyphicon) with some css :) Its an ugly way, but its works ! I nonetheless valid your response ;) thanks again ! – matthieu lopez Oct 22 '16 at 20:19
  • @user2137454 No, that is not ugly way, even I was going to suggest that only, because CSS is the upper most layer in theme, so there is not interference in code and If you get that small thing done with CSS, it is OK. – CodeNext Oct 22 '16 at 20:24
  • @user2137454 But If you are not using Seach word, then you do not have to use CSS also. Just add the #button_type and your text, you will be good to go. – CodeNext Oct 22 '16 at 20:27
  • I must use the world Search ;) – matthieu lopez Oct 22 '16 at 20:29
8

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.

Please refer the image

  • 1
    This is the best answer and should be the accepted one. – Jimmyb_1991 May 16 '17 at 8:42
  • Just realised this setting existed. Previously I was using hooks provided by the Bootstrap theme to override. – Web Assistant Jul 30 '18 at 11:11
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.