ng-bootstrap datepicker 日历图标未显示答案

【问题标题】：ng-bootstrap datepicker calender icon is not displayingng-bootstrap datepicker 日历图标未显示
【发布时间】：2017-11-01 06:29:22
【问题描述】：

我正在使用 angular-cli 和 ng-bootstrap 作为日期选择器。从 npm 安装 datepicker 并将其添加到主模块后，datepicker 正在工作，但是图标没有显示。

datepicker

<div class="form-inline col-sm-6"> 
   <label class="col-sm-3">From:</label> 
   <div class="input-group"> 
      <input 
             class="form-control" 
             placeholder="yyyy-mm-dd" name="dp" 
             [(ngModel)]="model" 
              ngbDatepicker 
             #d="ngbDatepicker"> 
            <button 
                 class="input-group-addon" 
                 (click)="d.toggle()" 
                  type="button"> 
                   <img 
                        src="img/calendar-icon.svg" 
                        style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
           </button> 
  </div> 
</div>

【问题讨论】：

你的代码是什么，你是如何构建它的，你把图像文件放在你的项目结构中的什么位置？
@JBNizet 我没有放图像文件。我只是使用html代码
来自：
发布相关代码，格式正确，在问题中，而不是在 cmets 中。 <img src="img/calendar-icon.svg"/>：这是一个简单的 HTML img 标签，用于在您的服务器上查找 calendar-icon.svg 文件。如果不存在，怎么可能显示图像。
谢谢...我错过了将 img 文件夹放在资产中。

标签： angular datepicker ng-bootstrap

【解决方案1】：

如果您打开stackblitz 获取他们的其中一个示例，您可以看到他们通过添加此样式获得图标：

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

然后只需使用类似这样的按钮：

<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>

【讨论】：

似乎是 ng-bootstrap 家伙的疏忽。他们真的应该将 css 与他们的库捆绑在一起，这样您就可以复制粘贴他们的示例代码，这一切都可以正常工作，而不必弄清楚发生了什么

【解决方案2】：

另一个选项你可以使用font awesome icons并将按钮标签的代码更改为下面-

<div class="input-group-append">
     <button class="btn btn-outline-secondary calendar fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>

【讨论】：

【解决方案3】：

我刚刚遇到了这个问题，我们在按钮上有字形图标类。这适用于大多数用例，除非从 ng 模板加载日期选择器。解决方法是在按钮内使用<i> 元素，例如：

<button (click)="toggleDatePicker($event)" type="button"><i class="glyphicon glyphicon-calendar"></i></button>

代替：

<button tabindex="-1" (click)="toggleDatePicker($event)" type="button" class="glyphicon glyphicon-calendar"></button>

【讨论】：

【解决方案4】：

你必须使用 css 作为图标。

来自 ng-bootstrap 的文档：

您必须提供按钮的图标。这允许您选择一个与您的应用程序风格相匹配的图标。在本例中，图标通过 CSS 类设置。

设置图标参考：

https://www.w3schools.com/icons/fontawesome5_icons_datetime.asp

【讨论】：