Html 如何在引导中更新按钮映像

我正在尝试用自己的图像更改glyphicon日历的背景图像。但在更新图像后，我无法更改父类btn btn默认属性以删除按钮中的额外填充。这里我的代码看起来像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>

在浏览器中显示如下内容

---

我需要像没有在按钮填充输出。提前感谢

对于您的情况，图像大小确实很重要

适当大小的图像

.glyphion日历{
背景：url（'https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png")不重复;；
填充：3px6px；
宽度：16px；
高度：16px；
字体系列：无；
字号：0；
垂直对齐：顶部；
}
div#日期时间选择器1{
宽度：100%；
}
span.input-group{
宽度：20%；
显示：内联块；
}
#datetimepicker1 input.form-control{
宽度：80%；
显示：内联块；
}

首先检查图像大小。它与

图标相同吗

？我认为图像大小不相关，因为它是背景，如果我错了，请纠正我。不管怎样，为什么不编辑按钮的填充或高度呢？尝试

溢出：隐藏我使用的是26X26图像大小。图像大小根据要求固定。是否有可能更新cssicon中的父类项目，并且图像大小不同…顺便说一句，GLYPHICONS中已经有日历图标，为什么不使用它<代码>

谢谢你的回答，Jinu，我正在寻找解决方案，我用填充覆盖按钮样式属性。代码如下所示<代码>我没有在与上面相同的.glyphicon日历中更改任何css。再次感谢您的支持answer@Girish很高兴你自己找到了答案。谢谢。