title: Font Awesome unicode icon is not working in firefox
body: <p>Here is my html code.</p>
  
  <pre><code>  &lt;label&gt;&lt;b&gt;Phone Verified : &lt;/b&gt;&lt;/label&gt;
    &lt;select class="form-control phone_verified"&gt;
        &lt;option value=""&gt;Select Option&lt;/option&gt;
        &lt;option value="1"&gt;Yes (&amp;#xf00c;)&lt;/option&gt;
        &lt;option value="0"&gt;No (&amp;#xf00d;)&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>I've linked cdn bootstrap link</p>
  
  <pre><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;style type="text/css"&gt;
    select  {
    font-family: 'FontAwesome', 'open sans'
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>In my <strong>chrome browser</strong> icon working perfect.</p>
  
  <p><a href="https://i.stack.imgur.com/K75lt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K75lt.png" alt="enter image description here"></a></p>
  
  <p>But in <strong>firefox not</strong> working.</p>
  
  <p><a href="https://i.stack.imgur.com/uXdCK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uXdCK.png" alt="enter image description here"></a></p>
  
  <p>I followed this <a href="https://stackoverflow.com/questions/36743041/font-awesome-icon-in-select-option">font awesome icon in select option</a></p>
  
  <p>Can anyone tell me what I'm doing wrong?</p>
  
  <p>check JSFiddle Link :- <a href="https://jsfiddle.net/17j8pxqb/" rel="noreferrer">https://jsfiddle.net/17j8pxqb/</a> </p>