title: How do i set font awesome icon on select dropdown?
body: <p>I want to set font awesome icon on select drop down and change the background color as well... I tried this code but it won't be work..</p>
  <p><strong>Here is my CSS code:</strong></p>
  <pre><code>select {
    border-radius: 30px;
    padding: 0px 70px 1px 20px;
    margin-top: 50px;
    margin-left: 45px;
    font-size: 18px;
    border: 2px solid orange;
    box-shadow: 10px 3px 8px #888888;
    appearance: none;
    position: relative;
  }
  select i {
    position: absolute;
    float: right;
    background-color: orange;
    bottom: 0px;
    pointer-events: none;
  }
  </code></pre>
  <p><strong>Here is my HTML Code:</strong></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
        &lt;p class=&quot;search&quot;&gt;Search by Location&lt;/p&gt;
        &lt;select class=&quot;dropdown&quot;&gt;
             &lt;option&gt;Canada&lt;/option&gt;
        &lt;/select&gt;
        &lt;i class=&quot;fas fa-angle-down&quot;&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/h3olY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h3olY.jpg" alt="enter image description here" /></a></p>