4

这是演示

如果您使用 2.3.1,请取消注释第 12 行,您将看到按钮正确显示

有谁知道我该如何修复 3.0.0-rc1 版本?

4

7 回答 7

16

要修复 bootstrap 3.0 的 bootstrap-datepicker 中的图标问题,请执行以下操作:

// ../bootstrap-datepicker.js

搜索下一个内容并替换

代替<i class="icon-arrow-left"/>

<i class="glyphicon glyphicon-arrow-left"/>

代替<i class="icon-arrow-right"/>

<i class="glyphicon glyphicon-arrow-right"/>

代替.toggleClass('icon-arrow-left icon-arrow-right');

.toggleClass('glyphicon-arrow-left glyphicon-arrow-right');

就是这样,我希望它对你有用。

于 2013-09-07T00:41:26.207 回答
6

更新

下面的答案对于 Bootstrap 3 Release Candidates 是正确的,但是稳定版本确实包含 Glyphicons 库,它需要一个基类和一个单独的图标类,例如:

<span class="glyphicon glyphicon-calendar"></span>

原答案:

从文档:

随着 Bootstrap 3 的推出,图标已移至单独的存储库。这使主要项目尽可能精简,使人们更容易交换图标库,并使 Glyphicons 图标字体更容易被 Bootstrap 之外的更多人使用。

这意味着您需要单独包含字形图标,您可以使用Bootstrap 自己的图标或其他库,如Font Awesome

于 2013-08-12T22:00:37.140 回答
4

它看起来.icon-calendar在 3.0.0-rc1 中不存在。

2.3.1 css

3.0.0-rc1 css

3.0.0-rc1 CSS 中提到的唯一图标似乎与导航有关。看起来他们可能已将其重命名为.glyphicon-calendar.

于 2013-08-12T22:07:39.430 回答
1

因此,我更喜欢添加另一个用于 Bootstrap V2 和 V3 的作品。

<tr>'+
    '<th class="prev">'+
        '<i class="icon-arrow-left"/>'+                 
        '<i class="glyphicon glyphicon-arrow-left"/>'+ //Añadido para solucionar el bug con BS3
    '</th>'+
    '<th colspan="5" class="switch"></th>'+
    '<th class="next">'+
        '<i class="icon-arrow-right"/>'+
        '<i class="glyphicon glyphicon-arrow-right"/>'+ //Añadido para solucionar el bug con BS3
    '</th>'+
'</tr>'+ 
于 2017-07-27T08:05:23.293 回答
0

我认为最好的方法是:

<script type="text/javascript">
      $(document).ready(function(){
        $('#ge_eventbundle_event_eventDate').datetimepicker({
              language: "fr", 
              format: "yyyy-mm-dd  hh:ii",
              autoclose: true,
              todayBtn: true,
              fontAwesome: 'font-awesome',
        });
    });
</script>
于 2017-12-28T19:55:03.810 回答
0

在您的 bootstrap-datetimepicker.js 上打开它并更改以下内容

this.icons = {
  leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
  rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')
}
this.icontype = this.fontAwesome ? 'fa' : 'glyphicon';

到以下

this.icons = {
  leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'fa-arrow-left' : 'fa-arrow-left'),
  rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'fa-arrow-right' : 'fa-arrow-right')
}
this.icontype = this.fontAwesome ? 'fa' : 'fa';

试试这个方法看看

于 2021-02-28T17:36:39.233 回答
0

在 bootstrap-datetimepicker.js 中找到以下行

this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || false;

换成这个

this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || true;
于 2018-01-18T12:43:51.350 回答