Bootstrap 4, Datetimepicker, слишком маленькая иконка в rems

Question

Обновление до Bootstrap 4, и я нигде не могу найти ответ на этот вопрос.Чтобы заставить работать Datetime Picker, я нашел эту версию для файлов .CSS и JavaScript:

https://github.com/tempusdominus/bootstrap-4

Это сработало, мой сборщик Datetime делает то, что должен.Однако, если я затем изменю файл CSS, чтобы использовать rem вместо px, иконка Datetime Picker справа будет примерно вдвое меньше, чем должна быть.Вот как выглядит HTML:

           <div class="row">
              <div class="col-4 offset-2">
                 <label for="date_started">Date Started:</label>
                 <div class="input-group date" id="datetimepicker_pos_date_start" style="width: 250px;">
                    <input name="date_started" id="date_started" type="text" class="form-control" />
                    <span class="input-group-addon">
                       <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                    </span>
                 </div> <!-- // input-group -->
                 <p class="help-block">Provide the date you started this position, if known.</p>
              </div> <!-- // col-4 -->
           </div> <!-- // row -->

Пока я не изменил сайт, чтобы начать использовать rem вместо px для измерений в моем файле CSS, код работал безошибочно с правильным JavaScript и так далее.Но произошло то, что высота кнопки справа примерно вдвое меньше, чем должна быть.

Я понимаю, что этот код не использует новую замену в Bootstrap 4 "input-group-append", но когда я попытался изменить его, все перестало работать.Я не могу найти какие-либо настройки, которые могу сделать, чтобы кнопка была правильной высоты справа от входа.Если я оставлю это так, это работает, но кнопка имеет неправильную высоту.

И, сделав кучу изменений в моем CSS-файле для других частей сайта, я понятия не имею, что может повлиять на это.Весь CSS-файл слишком длинный, чтобы публиковать здесь, но основы в верхней части здесь:

html
{
  /* required for fixed footer */
  position: relative;
  min-height: 100%;
  font-size: 62.5%; /* = 10px */
}


body
{ 
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.6rem; /* = 16px */
   /*   font-size: 16px; */
   color: #000000; 
   background-color: #FFFFFF;
   margin-top: 1.0rem; /* 10px; */
   margin-left: .2rem; /* 2px; */
   margin-right: .2rem; /* 2px; */
   padding: .5rem; /* 5px; */
   /* for fixed footer */
   margin-bottom: 4.0rem; /* 40px; */
}

Я надеюсь, что кто-то имеет некоторый опыт с этим или возможное решение этого.Я попытался вставить это в свой файл CSS, но, похоже, это никак не отразилось:

.input-group-addon, input-group-text
{
   height: 3.0rem !important;
   font-size: 3.0rem !important;
}