Bootstrap animated glyphicon showing undesirable border

Question

I need to replace a static Bootstrap glyphicon with an animated one when I click on this glyphicon. My issue is that if I use a replaceWith() function in order to totally replace the icon, the appearance is good. If I just replace the classes using removeClass() and addClassfunctions, the appearance becomes uggly, showing a thin dark border around the animated icon. Don't ask why I don't simply prefer the first solution. It would be too long to explain but I need to choose the second solution in my code.

Here is a fiddle to get a better understanding of the problem:

https://jsfiddle.net/wiltomap/vc5n2mLo/

The commented line is the replaceWith() example. Just uncomment it and comment the line bellow to see the difference.

Answer 1

You have to add the following styles to you CSS

a {
  text-decoration : none !important;
}

a:focus {
  outline: none;
}

Working version of your code: https://jsfiddle.net/rrc55ask/