html - 如何使用 Twitter bootstrap 3 显示日历图标

Question

我试图在我的 C# MVC View 中实现一个日期时间选择器，但我的输入框右侧的日历图标没有出现。

我正在按照 here 中的示例进行操作.

我的部分观点

<script src="/Scripts/angular-0.10.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap.min.css" >
        <link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap-responsive.min.css" >
        <script src="/Scripts/jquery-lib/jquery-1.10.2.min.js"></script>
        <script src="/Content/bootstrap/js/bootstrap.min.js"></script>


        <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
        <script  data-main="/Scripts/main" src="~/Scripts/require.min.js"></script>


 <div id="datetimepicker2" class="input-append">
                           <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"/>
                        <span class="add-on">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                            </i>
                        </span>
                    </div>

我试过像下面这样显式地说明字形图标的路径，但没有用:

   @iconSpritePath:     "/Content/bootsrap/img/glyphicons-halflings.png";

我最终得到这个错误:

The name 'iconSpritePath' does not exist

我还注意到我的 Twitter bootsrap 3 类不包含 icon-calender 类。

如何让日历图标出现？

Answer 1

来自官方 Bootstrap 文档:

随着 Bootstrap 3 的发布，图标已移至单独的存储库。这使主要元素尽可能精简，使人们更容易交换图标库，并使 Glyphicons 图标字体更容易被 Bootstrap 以外的更多人使用。

这就是您使用它的方式。说明在这里:http://glyphicons.getbootstrap.com/

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css" rel="stylesheet">
<span class="glyphicon glyphicon-calendar"></span>