Font Awesome unicode icon is not working in firefox

Question

Here is my html code.

  <label><b>Phone Verified : </b></label>
  <select class="form-control phone_verified">
      <option value="">Select Option</option>
      <option value="1">Yes (&#xf00c;)</option>
      <option value="0">No (&#xf00d;)</option>
  </select>

I've linked cdn bootstrap link

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
  select  {
  font-family: 'FontAwesome', 'open sans'
}
</style>

In my chrome browser icon working perfect.

But in firefox not working.

I followed this font awesome icon in select option

Can anyone tell me what I'm doing wrong?

check JSFiddle Link :- https://jsfiddle.net/17j8pxqb/

Answer 1

Unfortunately, this is an old issue with several browsers, especially Firefox on Mac OS X. There is a hack where you add a "multiple" attribute to the select tag, but this will alter the nature of your dropdown box and can result in unwanted input from the users.

 <select multiple class="form-control phone_verified">
  <option value="">Select Option</option>
  <option value="1">Yes (&#xf00c;)</option>
  <option value="0">No (&#xf00d;)</option>
  </select>

Working solution on Fiddle

Issue on Github