Bootstrap动画字形显示不合需要的边框

Question

当我点击这个glyphicon时，我需要用动画的替换静态Bootstrap glyphicon。我的问题是，如果我使用replaceWith()函数来完全替换图标，那么外观很好。如果我只是使用removeClass()和addClass函数替换类，则外观变得很粗糙，在动画图标周围显示一个薄的黑色边框。不要问为什么我不喜欢第一种解决方案。解释起来太长了，但我需要在代码中选择第二个解决方案。

这是一个更好地理解问题的小提琴：

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

注释行是replaceWith()示例。只需取消注释即可对下面的行进行评论以查看差异。

Answer 1

您必须将以下样式添加到CSS

a {
  text-decoration : none !important;
}

a:focus {
  outline: none;
}

代码的工作版本：https://jsfiddle.net/rrc55ask/