使用jQuery 3.2.1时，jQuery UI搭配Font Awesome出现异常效果

这个问题我之前碰到过，根源在于jQuery UI的button组件在hover状态下，会给.ui-icon元素自动生成一个::after伪元素来显示小caret箭头，而你之前的CSS只处理了原生图标本身，没覆盖这个伪元素的样式。

只需要给你的CSS加上这一行就能彻底解决：

/* 清空Font Awesome图标元素的hover伪元素内容 */
.ui-icon[class*=" fa-"]::after {
    content: "";
}

完整的CSS代码如下：

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0;
}
/* 新增：移除hover时的caret伪元素 */
.ui-icon[class*=" fa-"]::after {
    content: "";
}

修改后再测试，按钮悬停时那个多余的小箭头就消失了。原理很直接：我们通过清空伪元素的content属性，让jQuery UI原本要显示的caret不再渲染，同时保留Font Awesome图标的正常显示。

内容的提问来源于stack exchange，提问作者Romualdo Caruso