CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Girish
Girish

Reputation: 136

how to update button image in bootstrap

I am trying to change the background image of glyphicon-calendar with my own image. But when after updating the image I am unable to change the parent class btn btn-default properties for removing extra padding in button. Here my code look 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 is dynamically generate calender functionality

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

and in developer tools code 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 browser looks like this

enter image description here

I need output like without padding in button. Thanks in Advance

Upvotes: 3

Views: 1221

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9406

Image size does matter in your case

Image with proper 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>

Image with different size 

.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>

You can't do anything about padding as far as I know. Just Change the size of image.

EDIT

Just find a solution.

give 

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

and change the padding and height of btn.btn-default (height same as input text box)

.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>

Upvotes: 1

Related Questions