I have a problem with css that I have not been able to solve, I have a few icons of font awebsome and I want to place them inside the circle of color but I have not been able to upload the icons, I have the icons in a list, and also how I can do it that when the user selects an icon the name appears in the icon input
my styles are
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
/*Cambio el tamaño de letra o fuente*/
.social-icons .fa {
font-size: 1em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 20px;
height: 20px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-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 {
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);
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
<li><a><i class="fa fa-android" style="margin-top:-28px"></i></a></li>
<li><a><i class="fa fa-apple"></i></a></li>
<li><a><i class="fa fa-bitcoin"></i></a></li>
<li><a><i class="fa fa-css3"></i></a></li>
<li><a><i class="fa fa-dropbox"></i></a></li>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-facebook-square"></i></a></li>
<li><a><i class="fa fa-google-plus"></i></a></li>
<li><a><i class="fa fa-html5"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
<li><a><i class="fa fa-linkedin"></i></a></li>
<li><a><i class="fa fa-linkedin-square"></i></a></li>
<li><a><i class="fa fa-linux"></i></a></li>
<li><a><i class="fa fa-pinterest"></i></a></li>
<li><a><i class="fa fa-pinterest-square"></i></a></li>
<li><a><i class="fa fa-skype"></i></a></li>
<li><a><i class="fa fa-trello"></i></a></li>
<li><a><i class="fa fa-tumblr"></i></a></li>
<li><a><i class="fa fa-tumblr-square"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-twitter-square"></i></a></li>
<li><a><i class="fa fa-vimeo-square"></i></a></li>
<li><a><i class="fa fa-windows"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-youtube-play"></i></a></li>
<li><a><i class="fa fa-youtube-square"></i></a></li>
</ul>