html – 如何在bootstrap中更新按钮图像

2019年7月27日 105次阅读

我正在尝试用我自己的图像更改glyphicon日历的背景图像.但是在更新图像后,我无法更改父类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>

在浏览器中看起来像这样
《html – 如何在bootstrap中更新按钮图像》

我需要输出,如没有填充按钮.提前致谢

最佳答案 图像大小在您的情况下很重要

尺寸合适的图像

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