Html 为什么我的日期选择器图标比输入字段大？

我正在为我的应用程序实现一个日期选择器，并努力在输入字段中添加一个图标，因为图标看起来比输入字段大得多

{{'dropdowns.effective|date'| translate}

Hey Hoobs，您能将与上述代码相关的CSS添加到您的问题中吗？

帮助我们帮助您提供呈现HTML和CSSHey Hoobs，您能将与上述代码相关的CSS添加到您的问题中吗？
帮助我们帮助您提供呈现HTML和CSS
<div class="row">
   <legend class="form-group col-form-label col-sm-2"> 
     {{'dropdowns.effective_date' | translate}}</legend>
       <div class="input-group col-sm-10">
          <div class="input-group-append">
             <span class="input-group-text" (click)="dpr1.show()">
               <i class="fa fa-calendar" aria-label="Date"></i>
             </span>
       </div>
      <input type="text"class="form-control placeholder" 
[(ngModel)]="searchModel.readingEffectiveDate"#dpr1="bsDatepicker" 
bsDatepicker placeholder="{{'placeholder.startDate' | 
translate}}"name="searchModel.readingEffectiveDate" 
[bsConfig]="datePickerOptions" > 
   </div>
</div>