Font Awesome icon in select option
<p>I try to add a <strong>caret down icon</strong> to the first selection of several options as shown on the picture below:</p>

<p><a href="https://i.stack.imgur.com/NZ8bB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NZ8bB.png" alt="enter image description here"></a></p>

<p>here is a <a href="https://jsfiddle.net/wwut6apr/30/" rel="noreferrer">Fiddle</a> with my example. </p>

<p>I can't get the icon to be visible on the Fiddle above.</p>

<p>And the corresponding code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
  height: 200px;
  background-color: red;
  padding-top: 100px;
  padding-left: 150px;
}
#before-select {
  font-size: 30px;
  color: #ffffff;
}
select {
  border: none;
  background: transparent;
  /*background-color: blue;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 180px;
  padding-top: 0px;
  background-size: 20px;
  color: #ffffff;
  font-size: 30px;
}
select option {
  color: #424146;
  background: #ffffff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /&gt;

&lt;div class="wrapper"&gt;

  &lt;form role="form"&gt;
    &lt;span id="before-select"&gt;in&lt;/span&gt;

    &lt;select name="town"&gt;
      &lt;option value="London"&gt;London &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/option&gt;
      &lt;option value="Paris"&gt;Paris&lt;/option&gt;
      &lt;option value="Madrid"&gt;Madrid&lt;/option&gt;
    &lt;/select&gt;


  &lt;/form&gt;


&lt;/div&gt;

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>