Icon resolution with his block (Font Awsome) - html

Question

I used Font Awesome for the icon and in the hover it is what I like this resultsenter image description here
and also I have this problem when a link is selected that is what I have enter image description here
I use bootstrap
.nav > li > a:hover
{
background-color: transparent;
}
.iconetwitter
{
color: #ffffff;
width: auto;
height: 33px;
position: relative;
border-radius: 5px;
transition: background-color color 0.2s, font-size 0.2s , ease-in-out;
}
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active
{
color: #1DA1F2;
background-color: white;
}
<ul class="nav">
<li class="contacteicone col-md-3">
<a href="#" class="monicone">
<span class="fa-stack fa-lg">
<i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i>
</span>
</a>
</li>
</ul>

Answer 1

Got it...
The strange hover state is caused by the background color of your font-awesome icons. The background is larger than the character. Correct this with line-height, like this:
.fa {line-height: 0.85em;}
Or use the nicer solution is described here: https://stackoverflow.com/a/27382026/2397550. Then you should use this icon for the underlying square: http://fontawesome.io/icon/square/
The white area behind a focussed icon is because you did this:
.nav > li > a:hover {background-color: transparent;}
This should be:
.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}