Seleccionar y deseleccionar icono

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<input id='txtIcon'>

<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
      <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
    <li class="enlace"><a href="#"><i...

CSS

a {
  color: black;
  text-decoration: none;
}

JavaScript

var iconos = document.querySelectorAll('.fa');
var input = document.getElementById('txtIcon');  //Modifique el ID

// cada que cambie se ejecuta la funcion setIcon
input.addEventListener('change', setIcon);

for (var i = 0; i < iconos.length; i++) {
  iconos[i].addEventListener('click', function () {
  	input.value = (input.value === this.className) ? '' : this.className;
    
    // La ejecutamos manual pues el onchange no se lanza si se cambia con JS
    input.dispatchEvent(new Event('change'));
  });
}

function setIcon(selector){
   // Estas 4 lineas hacen la magia de cambiar los textos a clases validad para buscar
  var validClassName = selector.srcElement.value.trim().split(' ');
  var stringClass = validClassName.join('.');
  var all = document.querySelectorAll('.fa');
  var found = document.querySelectorAll('.'+ stringClass);
  
  // Los regresamos todos a normal, antes de colorear
  all.forEach(function(element){
     element.style.color = 'black';
  });

  // coloreamos el elegido
  if(found.length > 0){
     found[0].style.color = 'red';
  }
}