I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?

/* remove the original arrow */
select.input-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Heading</h2>
      <div class="form-group">
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

    /* remove the original arrow */
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 
        background-color: #92ceea!important;
     }

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

    select + i.fa {
        float: right;
        margin-top: -26px;
        margin-right: 10px;
        /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
        pointer-events: none;
        /* everything after this is just to cover up the original arrow */
        /* (for browsers that don't support the syntax used above) */
        background-color: transparent;
        color:black!important;
        padding-right: 5px;
    }

   select option{
       padding-right: 21px;
   }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>




<select class="form-control">
        <option value="">select_option</option>

        <option value="1">Opção1</option>
        <option value="2">Opção2</option>
</select>
<i class="fa fa-chevron-down"></i>