title: How to place favicon icon inside select input box
body: <p>I'm trying to insert a <code>fa-chevron</code> icon inside my dropdown box but it's not working, it's displaying outside the box.</p>
  
  <p>I've tried changing the margins but that doesn't work.</p>
  
  <p>This is when <code>margin-right</code> is set to 200:</p>
  
  <p><a href="https://i.stack.imgur.com/vJyY4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vJyY4.jpg" alt="enter image description here"></a></p>
  
  <p>And this is without margins:</p>
  
  <p><a href="https://i.stack.imgur.com/zSBUS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSBUS.jpg" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="col-md-8 d-flex" style="margin-top: -25px"&gt;
      &lt;select name="carlist" form="carform" class="form-control" id="exploreNeighbour" style="z-index: 2"&gt;
          &lt;option value=""&gt;I have no idea&lt;/option&gt;
          {% for venue in venue_category %}
          &lt;option value="{{ venue.name }}"&gt;{{ venue.name }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
      &lt;i class="fas fa-chevron-down" style="pointer-events: none; z-index: 1; margin-right: 20px"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>