0

I'm trying to make a simple Bootstrap searchbar (with bootstrap 3.3.7), but always the glyphicon-search is more little than the form...

With all Bootstrap navbar examples, the result is the same, as the following : 

<div class="col-sm-3 col-md-3">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="q">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
    </form>
</div>

my-searchbar

Do I really need to add some CSS to that ?

Isador
  • 595
  • 3
  • 10
  • 23
  • Yes, use CSS like suggested here http://stackoverflow.com/q/18478365/5115768 – lenny Nov 25 '16 at 16:37
  • Thanks, but now I have another question. I was on my work computer, and now at home, I do the same with bootstrap 3.3.7, but my glyphicon-search is in gray ... not like my previous picture. I tried to include different bootstrap css, but always gray. Do you have an idea ? – Isador Nov 25 '16 at 18:08

1 Answers1

0

To change size and color of your glyphicon: 

.glyphicon-search.white {
    font-size: 1.2em; // slightly bigger
    color: #fff; // white
}

In your html 

<i class="glyphicon glyphicon-search white"></i>
lenny
  • 2,978
  • 4
  • 23
  • 39