如何在引导程序中更新按钮图像

Question

我正在尝试用我自己的图像更改 glyphicon-calendar 的背景图像。但是当更新图像后，我无法更改父类 btn btn-default 属性以删除按钮中的额外填充。这里我的代码看起来像
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：日期选择器是动态生成日历功能

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

在开发者工具中的代码看起来像这样

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

在浏览器中看起来像这样

我需要没有填充按钮的输出。提前致谢

Answer 1

图像大小在你的情况下很重要

图片大小合适

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

不同大小的图片

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

据我所知，您无法对填充做任何事情。只需更改图像的大小即可。

编辑

只要找到解决办法。

给

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