title: How to style vue-bootstrap-datetimepicker by changing the width and inserting icons in it?
body: <p>I have two date pickers objects from the package <a href="https://www.npmjs.com/package/vue-bootstrap-datetimepicker" rel="nofollow noreferrer">vue-bootstrap-datetimepicker</a>. They work perfectly in terms of functionality but I would like to make some changes to their appearence. I have the following code that is relevant:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class="form-row"&gt;
              &lt;date-picker
                      name="begin-date"
                      @dp-change="changeDate()"
                      v-model="model.beginDate"
                      :config="datePickerConfig"
                      ref="beginDate"&gt;
              &lt;/date-picker&gt;
          &lt;/div&gt;
  
          &lt;div class="form-row"&gt;
              &lt;date-picker
                      name="end-date"
                      @dp-change="changeDate()"
                      v-model="model.endDate"
                      :config="datePickerConfig"
                      ref="endDate"&gt;
              &lt;/date-picker&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  </code></pre>
  
  <p>I would like to insert a calender icon for instance, I usually do that inside bootstrap components like so:</p>
  
  <pre><code>        &lt;b-button
                  id="Somebutton"
                  :title="example for stack overflow"
                  size="sm"
                  :class="{danger: hasError}"
                  :disabled="loading"&gt;
              &lt;font-awesome-icon icon="columns"&gt;&lt;/font-awesome-icon&gt;
          &lt;/b-button&gt;
  </code></pre>
  
  <p>But putting <code>&lt;font-awesome-icon icon="columns"&gt;&lt;/font-awesome-icon&gt;</code> doesn't work in the code i want to change. Neither does the HTML work ( e.g. <code>&lt;i class="fas fa-columns"&gt;&lt;/i&gt;</code>). So I was wondering how to put the icons in there. Another question was how to change their width, at this moment they look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/GZ64Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GZ64Y.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/W14Tv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W14Tv.png" alt="enter image description here"></a></p>
  
  <p>I would like to change their width so that they fit next to each other on the same line but couldn't find anything in the package documentation that could help me do this.</p>