Bootstrap 4 DateTimePicker 图标未显示

Question

我在 Rails 5.2.0 上。我正在使用以下代码实现引导日期时间选择器：

  <div class="form-group">
    <div class='input-group date' id='datetimepicker1' data-target-input='nearest'>
      <input type='text' class="form-control datetimepicker-input" data-target="#datetimepicker1" name="params['start_time']" />
      <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
  </div>

宝石档案：

gem 'momentjs-rails', '~> 2.20', '>= 2.20.1'
gem 'bootstrap', '~> 4.1.1'
gem 'bootstrap4-datetime-picker-rails'
gem 'jquery-rails'

应用程序.js

//= require jquery3
//= require jquery_ujs
//= require turbolinks
//= require popper
//= require moment
//= require bootstrap
//= require tempusdominus-bootstrap-4.js
//= require_tree .

应用程序.scss

@import "bootstrap";
@import "tempusdominus-bootstrap-4.css";

我遇到了一个问题，即日期时间选择器的页面上没有显示任何图标。

附上截图供参考。任何人都可以指出这里的任何错误吗？

提前致谢。

Answer 1

您必须包含 Font-Awesome CSS，然后将其包含在 HTML head 标记中：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

最新版本（6beta2）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />