How would I place a font-awesome icon into a select drop-down menu?
<p>I've been battling with trying to place a font-awesome icon into a select option (drop down menu). I have tried the solution <a href="https://stackoverflow.com/questions/23837657/is-it-possible-to-use-font-awesome-icon-instead-to-select-default-drop-down-sign">here</a> that was posted on this site. However, this places the font-awesome icon next to the label and not within the select option box.</p>

<p>I've also tried putting in the unicode directly into the html option tag... however, once clicked on that down arrow it turns into a question mark. (Also, I cannot use bootstrap with this project)</p>

<p>Please help!</p>

<p>HTML:</p>

<pre><code>&lt;div class="modal-form stack col75"&gt;
    &lt;label for="game"&gt;Game:&lt;/label&gt;
    &lt;select class="form-control easy-drop-down" id="modal-game-options"&gt; 
        &lt;option selected disabled&gt;Please Select a Show&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;3&lt;/option&gt;
        &lt;option&gt;4&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
  padding-left: 20px;
  content: "&amp;#xf107;";
}
</code></pre>

<p><strong>Here are some snapshots</strong></p>

<p>Current:
    <a href="https://i.stack.imgur.com/RidrF.png" rel="nofollow noreferrer">without-arrow</a></p>

<p>Goal:
    <a href="https://i.stack.imgur.com/OWGg9.png" rel="nofollow noreferrer">with-arrow</a></p>