Font Awesome stacked icon hover outline issue

Question

I am using font awesome stacked icon.My code is:

<span id="twitterBox" class="fa-stack"><i id="faTwittertSquare" class="fa fa-square fa-  stack-2x colorOrange"></i><i id="fatwitter" class="fa fa-twitter fa-stack-1x colorWhite" title="twitter"></i></span>

<span id="facebookBox" class="fa-stack"><i id="faFacebookSquare" class="fa fa-square fa-stack-2x colorOrange"></i><i id="faFacebook" class="fa fa-facebook fa-stack-1x colorWhite" title="facebook"></i></span>

jquery code to change color when mouse hover is:

$("#twitterBox").hover(function(){
$("#faTwittertSquare").removeClass("colorOrange");
$("#faTwittertSquare").addClass("colorWhite");
$("#fatwitter").removeClass("colorWhite");  
$("#fatwitter").addClass("colorOrange");
},function(){
$("#faTwittertSquare").removeClass("colorWhite");
$("#faTwittertSquare").addClass("colorOrange");
$("#fatwitter").removeClass("colorOrange");
$("#fatwitter").addClass("colorWhite");
});

$("#facebookBox").hover(function(){
$("#faFacebookSquare").removeClass("colorOrange");
$("#faFacebookSquare").addClass("colorWhite");
$("#faFacebook").removeClass("colorWhite");
$("#faFacebook").addClass("colorOrange");
},function(){
$("#faFacebookSquare").removeClass("colorWhite");
$("#faFacebookSquare").addClass("colorOrange");
$("#faFacebook").removeClass("colorOrange");
$("#faFacebook").addClass("colorWhite");
});

it's all working but when i mouse hover the icons many time icon right side small line visible.how to fix it.This problem only on chrome browser.

This my image:

my css code:

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
           }

   .fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
       }

    .fa-square-o:before {
        content: "\f096";
                        }

     .fa-square:before {
        content: "\f0c8";
                       }
     .fa-stack-2x {
         font-size: 2em;
                  }

     .fa-stack-2x {
         position: absolute;
         left: 0;
         width: 100%;
         text-align: center;
                  }
      .fa-twitter:before {
         content: "\f099";
                         }
       .fa-facebook:before {
         content: "\f09a";
                           }

       .colorWhit{
         color:#FFFFFF;
                 }

       .colorOrange{
          color:#FFA500;
                   }

Answer 1

Here's a CSS-only solution: http://jsfiddle.net/h66t0sde/1/

CSS:

span.social-box i.social-inner{
    color:#FFA500;
}

span.social-box i.social-outer{
    color:#fff;
}

/* Swap colors on hover */
span.social-box:hover i.social-inner{
    color:#fff;
}

span.social-box:hover i.social-outer{
    color:#FFA500;
}

HTML:

<span id="twitterBox" class="fa-stack social-box">
    <i id="faTwittertSquare" class="fa fa-square fa-stack-2x social-outer"></i>
    <i id="fatwitter" class="fa fa-twitter fa-stack-1x social-inner" title="twitter"></i>
</span>

<span id="facebookBox" class="fa-stack social-box">
    <i id="faFacebookSquare" class="fa fa-square fa-stack-2x social-outer"></i>
    <i id="faFacebook" class="fa fa-facebook fa-stack-1x social-inner" title="facebook"></i>
</span>

As a side note, you should avoid classes that include color names, since that locks you into either having confusing names later (if the colors change) or having to track down everywhere you've used it (if you change the name to match the new color).

I also didn't want to rely on the FontAwesome classes for the effect, since those have already changed once. To that end, I came up with some names for the relevant bits that seemed appropriate.

As for the line you're seeing: no idea. I don't see that in this jsFiddle when viewing it in Chrome or Firefox, so if you're still seeing it, something in the rest of your CSS is causing that.