Bootstrap 4 DateTimePicker Icons not showing

Question

I'm on Rails 5.2.0. I'm implementing bootstrap datetimepicker with below code:

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

Gemfile:

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

application.js

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

application.scss

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

I'm encoutering a problem where no icons are showing up on the page for the datetimepicker.

Attached is the screenshot for reference. Can anyone please point out any fault here?

Thanks in advance.

Answer 1

I have updated the default setting of icons prop of DateTimePicker by below code, then it is working fine for me

$.extend(true, $.fn.datetimepicker.defaults, {
                icons: {
                    time: 'far fa-clock',
                    date: 'far fa-calendar',
                    up: 'fas fa-arrow-up',
                    down: 'fas fa-arrow-down',
                    previous: 'fas fa-chevron-left',
                    next: 'fas fa-chevron-right',
                    today: 'fas fa-calendar-check',
                    clear: 'far fa-trash-alt',
                    close: 'far fa-times-circle'
                }
            });

Answer 2

You must to include Font-Awesome CSS then include that in your HTML head tag:

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

Last version (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" />