Tengo una lista HTML donde tengo varios iconos que son opciones de la lista, debido a que estos trabajando con .NET he agregado un textbox para facilitar el envio de datos a mi BD, en ese textbox segun el icono que seleccionen envio la class "fa fa-android" o segun sea el icono que se seleccione, eso lo hago con
var iconos = document.querySelectorAll('.fa');
var input = document.getElementById('<%=txtIcono.ClientID%>');
for (var i = 0; i < iconos.length; i++) {
iconos[i].addEventListener('click', function () {
input.value = this.className;
});
}
<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 class="fa fa-youtube"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>
Ahora, siempre que doy clic en el boton aceptar para enviar los datos al servidor, si hace falta algun dato no se envia nada (por que tengo validaciones) pero se des-selecciona el icono que he elegido, solo mantengo en el textbox la clase por ejemplo "fa fa-android" del icono que se selecciono, es por ello que ahora quiero que de acuerdo lo que tenga el textbox se pueda seleccionar el icono de la lista HTML con JQuery o JS