Twitter 的 Bootstrap Datepicker 缺少 Glyphicons答案

【问题标题】：Twitter's Bootstrap Datepicker missing GlyphiconsTwitter 的 Bootstrap Datepicker 缺少 Glyphicons
【发布时间】：2016-05-04 01:25:52
【问题描述】：

我正在尝试使用 bootstrap (http://eternicode.github.io/bootstrap-datepicker/) 中的 datepicker，除了没有显示任何字形图标外，一切正常。

我看到 glyphicons 被移动到了我正在使用的 bootstrap 3 (http://glyphicons.getbootstrap.com/) 下的另一个目录，但我不确定如何集成它。

两者

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

和

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

没用。

有人知道我如何将 bootstrap 3 与 twitter 日期选择器集成吗？

【问题讨论】：

显示您的代码。在引导程序 3 中 <span class="glyphicon glyphicon-refresh"></span> 在引导程序 2 中 <i class="icon-refresh"></i>

标签： datepicker twitter-bootstrap-3 glyphicons

【解决方案1】：

下载插件的源代码 Javascript 和 CSS（或更少）并将旧类引用替换为新的，请参阅：http://www.bootply.com/bootstrap-3-migration-guide。是。如PilHA 所述，将icon-* 替换为glyphicon glyphicon-*，将input-append 替换为input-group 等。

对您的 HTML 代码执行相同的操作。或者使用迁移器/更新器，例如：http://twitterbootstrapmigrator.w3masters.nl/、http://bootstrap3.kissr.com/ 或 http://code.divshot.com/bootstrap3_upgrader/

从http://glyphicons.getbootstrap.com/ 安装 Glyphicons：下载文件并将所有字体文件复制到 CSS 附近的 /fonts 目录中。将存储库中 /css 中已编译的 CSS 文件包含到本地 css 文件夹中，或下载 Less 文件并使用 Bootstrap 文件对其进行编译。

更新 Glyphicons 自 RC2 以来又回来了。 Twitter 的 Bootstrap 3 包含来自 Glyphicon Halflings 集的 180 个字体格式的字形。

【讨论】：

【解决方案2】：

除了更改类引用之外，我发现还有一些布局考虑不允许一对一交换某些类，例如输入控件上的 span2。我最终得到以下结果：

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

datepicker.css 第 176-177 行的 CSS 更改：

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

第 34 行 datepicker-bootstrap.js 中的 Javascript 更改：

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

我还写了一篇博文，在这里进行了更详细的介绍：http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

【讨论】：

谢谢，这篇博文帮了很多忙，因为不清楚是否需要在$(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });!上调用 datepicker

【解决方案3】：

从这里下载 bootstrap3 Download

现在解压并从字体文件夹中获取字体。

复制此 .ttf 、 .otf 、.svg 和其他文件并粘贴@您的项目根目录

你可以从这里下载 glyphoicon.css glypho.css

在索引文件中包含这个 css 文件

搞定了

【讨论】：

【解决方案4】：

我最初无法更改我的 glyphicons，在 F12 开发工具中，我在尝试加载“glyphicons-halflings-regular.woff2”时会看到一个错误。我可以通过下载 .woff2 文件并将其添加到我的字体文件夹来修复它。然后我就可以改变我想要的了。 https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

【讨论】：