ng-bootstrap 日期选择器日历图标未显示

Question

我正在使用 angular-cli 和 ng-bootstrap 作为日期选择器。从 npm 安装 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>

Answer 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>

Answer 2

另一个选项，您可以使用字体真棒图标并将按钮标签的代码更改为以下 -

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