twitter-bootstrap Bootstrap 3.0.0 打破了日期选择器图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18197270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0.0 breaks the datepicker icon
提问by daydreamer
回答by Rodolfo Perez Avila
To fix the icon issue in bootstrap-datepicker for bootstrap 3.0 do this:
要修复 bootstrap-datepicker for bootstrap 3.0 中的图标问题，请执行以下操作：
// ../bootstrap-datepicker.js
// ../bootstrap-datepicker.js
Search the next content and replace
搜索下一个内容并替换
replace <i class="icon-arrow-left"/>
代替 <i class="icon-arrow-left"/>
with <i class="glyphicon glyphicon-arrow-left"/>
和 <i class="glyphicon glyphicon-arrow-left"/>
replace <i class="icon-arrow-right"/>
代替 <i class="icon-arrow-right"/>
with <i class="glyphicon glyphicon-arrow-right"/>
和 <i class="glyphicon glyphicon-arrow-right"/>
replace .toggleClass('icon-arrow-left icon-arrow-right');
代替 .toggleClass('icon-arrow-left icon-arrow-right');
with .toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
和 .toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
That's all, I hope it works for you.
就是这样，我希望它对你有用。
回答by koala_dev
UPADTE
UPADTE
The answer below was true for Bootstrap 3 Release Candidates, however the stable version does include the Glyphicons library which requires a base class and an individual icon class, ex:
下面的答案适用于 Bootstrap 3 候选版本，但是稳定版本确实包含 Glyphicons 库，它需要一个基类和一个单独的图标类，例如：
<span class="glyphicon glyphicon-calendar"></span>
Original answer:
原答案：
From the docs:
从文档：
With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.
随着 Bootstrap 3 的推出，图标已移至单独的存储库。这使主要项目尽可能精简，使人们更容易交换图标库，并使 Glyphicons 图标字体更容易被 Bootstrap 之外的更多人使用。
That means you need to include the glyphicons separately, you can use Bootstrap's own iconsor another library like Font Awesome
这意味着您需要单独包含字形，您可以使用Bootstrap 自己的图标或其他库，如Font Awesome
回答by taco
It looks like .icon-calendardoes not exist in 3.0.0-rc1.
看起来.icon-calendar在 3.0.0-rc1 中不存在。
The only icons mentioned in 3.0.0-rc1 CSS seem to be related to navigation. It also looks like they may have renamed it to .glyphicon-calendar.
3.0.0-rc1 CSS 中提到的唯一图标似乎与导航有关。看起来他们可能已将其重命名为.glyphicon-calendar.
回答by Al Gallardo
So, instead of, I prefer add the another for works with Bootstrap V2 and V3.
因此，我更喜欢为 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>'+
回答by Siddharajsinh Zala
find below line in bootstrap-datetimepicker.js
在 bootstrap-datetimepicker.js 中找到以下行
this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || false;
Replace with this
换成这个
this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || true;
回答by rakoto
I think the best way is this:
我认为最好的方法是这样的：
<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>
