How to update button image in bootstrap

Question

I am trying to change the background image of a glyphicon calendar with my own image. But when, after updating the image, I can’t change the parent class of the btn btn-default property to remove the extra padding in the button. Here my code looks like CSS:

.glyphicon-calendar{
background : url('../app/images/datePickerIcon.png') no-repeat;
padding: 3px 6px;
width:26px;
height:26px;
font-family: none;
font-size: 0;
vertical-align: top;
}

HTML: Date Picker Dynamically Generates Calendar Functionality

<div class="input-group">
                        <mydatepicker ng-model="nextDate" date-options="dateOptions"
                            opened="opened" name="nextDate" ng-pattern="datePattern" />
                    </div>

and in the code of the developer tools it looks like this:

<span class="input-group">
    <button class="btn btn-default" ng-click="open($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

in the browser it looks like this:

I need a conclusion, as without filling in the button. Thanks at Advance

Answer 1

Image size matters in your case

Image with the correct size

.glyphicon-calendar {
  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;
  padding: 3px 6px;
  width: 16px;
  height: 16px;
  font-family: none;
  font-size: 0;
  vertical-align: top;
}
div#datetimepicker1{
  width: 100%;
}
span.input-group{
  width: 20%;
  display: inline-block;
}
#datetimepicker1 input.form-control{
  width: 80%;
  display: inline-block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group">
    <button class="btn btn-default" ng-click="open($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
        </div>
      </div>
    </div>
  </div>
</div>

Run codeHide result

Different size image

.glyphicon-calendar {
  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;
  padding: 3px 6px;
  width: 26px;
  height: 26px;
  font-family: none;
  font-size: 0;
  vertical-align: top;
}
div#datetimepicker1{
  width: 100%;
}
span.input-group{
  width: 20%;
  display: inline-block;
}
#datetimepicker1 input.form-control{
  width: 80%;
  display: inline-block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group">
    <button class="btn btn-default" ng-click="open($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
        </div>
      </div>
    </div>
  </div>
</div>

Run codeHide result

, . .

.

.glyphicon-calendar { 
  background-size: contain;
  top: -3px; //to adjust the icon.
}

btn.btn-default ( , )

.input-group .glyphicon-calendar {
  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;
  padding: 3px 6px;
  width: 26px;
  height: 26px;
  font-family: none;
  font-size: 0;
  vertical-align: top;
  background-size: contain;
  top: -3px;
}
.btn-default{
 height: 34px;
 padding: 2px 8px;
}
div#datetimepicker1{
  width: 100%;
}
span.input-group{
  width: 20%;
  display: inline-block;
}
#datetimepicker1 input.form-control{
  width: 80%;
  display: inline-block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group">
    <button class="btn btn-default" ng-click="open($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
        </div>
      </div>
    </div>
  </div>
</div>

Hide result