Как сделать меняющиеся иконки?

$('input').change(function() { 
  let el = $(this).parent(); 
  validateOnServer(this.value, function(isSuccess) { 
    if (isSuccess) { 
      el.addClass('success'); 
      el.removeClass('error'); 
    } else { 
      el.addClass('error'); 
      el.removeClass('success'); 
    } 
  }); 
}); 
 
function validateOnServer(value, callback) { 
  // здесь должен быть ajax запрос 
  // $.ajax({ 
  //     url: 'url', 
  //     data: value 
  // }).done(function (data) { 
  //     callback(data); 
  // }); 
 
  // сейчас просто заглушка 
  callback(value); 
}

span { 
  position: relative; 
} 
 
.success:after, 
.error:after { 
  position: absolute; 
  right: 4px; 
  color: green; 
  content: '\2713'; 
} 
 
.success:after { 
  color: green; 
  content: '\2713'; 
} 
 
.error:after { 
  color: red; 
  top: -2px; 
  content: '\2717'; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
  <input type="text" /> 
</span>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  background: #fff; 
  padding-top: 70px; 
} 
 
.b-form { 
  max-width: 400px; 
  margin: 15px auto; 
  padding: 15px; 
  background: #f7f7f7; 
  border: 1px solid #ccc; 
  border-radius: 3px; 
} 
 
.b-form-item { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  width: 100%; 
} 
 
.b-form-control { 
  width: 100%; 
  display: block; 
  height: 50px; 
  padding: 5px 20px; 
  text-align: center; 
  margin: 5px 0; 
} 
 
.b-form-control-submit { 
  background: royalblue; 
  color: #fff; 
  border: none; 
  font-weight: 700; 
  text-transform: uppercase; 
} 
 
.b-form-control-input { 
  border: 1px solid #A9A9A9; 
} 
 
.b-form-control-input+.i { 
  position: absolute; 
  top: 5px; 
  right: 0; 
  width: 50px; 
  height: 50px; 
  line-height: 50px; 
  background: #228B22; 
  text-align: center; 
  pointer-events: none; 
  opacity: 0; 
  transition: opacity .3; 
} 
 
.b-form-control-input+.i:before { 
  content: '\f00c'; 
  font-family: 'FontAwesome'; 
  color: #fff; 
} 
 
.b-form-control-input:valid { 
  border-color: #228B22; 
} 
 
.b-form-control-input:valid+.i { 
  opacity: 1; 
} 
 
.b-form-control-input:focus:invalid { 
  border-color: red; 
} 
 
.b-form-control-input:focus:invalid+.i { 
  background: tomato; 
  opacity: 1; 
} 
 
.b-form-control-input:focus:invalid+.i:before { 
  content: '\f00d'; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
<form class="b-form" method="post" action="#"> 
  <div class="b-form-item"> 
    <input class="b-form-control b-form-control-input" type="email" name="email" placeholder="Email" required> 
    <span class="i"></span> 
  </div> 
  <button class="b-form-control b-form-control-submit" type="submit">Send</button> 
</form>