I have a html list and in each tag <i> place an icon, the user selects an icon and I get the value that I assign to the icon and the option that the user selects (icon) I highlight it with css styles, the problem I have is that when the form was sent, if the FieldValidator is activated by any field, data is not sent to the DB but the styles of the selected icon are lost. How to preserve the styles?

This is what it looks like when the icon is selected
[![enter image description here](https://i.stack.imgur.com/rcVOs.png)](https://i.stack.imgur.com/rcVOs.png)

and this is what it looks like when the data is sent the requiredField validator is activated and returns to the page again to show the wrong fields and the css is lost since the icon does not appear selected again
[![enter image description here](https://i.stack.imgur.com/W3san.png)](https://i.stack.imgur.com/W3san.png)

```js
        $(document).ready(function () {

            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;
                });
            }
```

```css
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}
```

```html
<table>
                        <tr>
                            <td style="width: 126px">Seleccione un Icono:</td>
                            <td>
                                <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>
                                <asp:TextBox runat="server" ID="txtIcono" MaxLength="100" SkinID="txtGral" Width="168px" hidden="true"></asp:TextBox>
                                <asp:RequiredFieldValidator runat="server" ID="rfIcono" ControlToValidate="txtIcono" ErrorMessage="*Seleccione un icono para el anuncio." Display="Dynamic">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
</table>
```