Question

以下是Demo

如果你使用2.3.1，取消注释第12行，你会看到按钮正确显示

有谁知道如何修复版本3.0.0-rc1？

Answer 1

要在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');

就是这样，我希望它适合你。

Answer 2

<强> UPADTE

下面的答案适用于Bootstrap 3 Release Candidates，但稳定版本确实包含Glyphicons库，它需要一个基类和一个单独的图标类，例如：

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

原始回答：

来自文档：

随着Bootstrap 3的推出，图标已移至separate repository。这保持不变尽可能精益的主要项目，让人们更容易交换图标库，更容易制作Glyphicons图标字体可供Bootstrap以外的更多人使用。

这意味着您需要单独包含字形符号，您可以使用Bootstrap's own icons或其他库，例如Font Awesome

Answer 3

3.0.0-rc1中似乎不存在.icon-calendar。

2.3.1 css

3.0.0-rc1 css

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

Answer 4

因此，我宁愿添加另一个用于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>'+

Answer 5

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

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

替换为

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

Answer 6

在您的 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';

试试这个方法，看看

Answer 7

我认为最好的方法是：

<div id='balance'/>
<div id='tickets'/>
<div id='buy'/>
<div id='pot'/>

Bootstrap 3.0.0打破了datepicker图标

7 个答案: