CSS Fontawesome Icon Click able in IE 10

Question

HTML

<div class="select">
  <select>
    <option value="">Order By</option>
    <option value="1">ID</option>
    <option value="2">Details</option>
  </select>
</div>

CSS

.select {
  position: relative
}

.select select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background-color: #e5e5e5;
  height: 30px;
  padding: 0 20px;
  width: 100%;
  position: relative;
  margin-bottom: 0;
}

.select select::-ms-expand {
  display: none;
}

.select:after {
  content: '\f0d7';
  font-family: 'FontAwesome';
  font-size: 16px;
  color: #000;
  position: absolute;
  right: 15px;
  top: 6px;
  pointer-events: none;
}

Fiddle

Answer 1

If you want to have the icons beside your existing elements in the dropdown, you have to include that you want them next to your HTML elements. Meaning, you have to add the specific FontAwesome icon next to your dropdown element for it to display. If that was your question.

Like this; <option value=""><i class="fa fa-your-content"></option> .

Else it won't display no matter how hard you try.

---

Additionally, have you linked to the FontAwesome source or CDN ? Because without the source code, you can't display any of the customized elements.