带有 Font Awesome 不良效果的 jQuery UI（使用 jQuery 3.2.1）答案

【问题标题】：jQuery UI with Font Awesome undesired effect (with jQuery 3.2.1 )带有 Font Awesome 不良效果的 jQuery UI（使用 jQuery 3.2.1）
【发布时间】：2018-05-11 13:20:02
【问题描述】：

为了使用带有 Font Awesome 图标的 jQuery UI，我遵循了建议由@Brombomb 和@Clever 在Extend jQuery UI Icons with Font-Awesome. 中给出的@

不过，在使用 jQuery 3.2.1 时，将鼠标悬停在按钮上方时会出现不希望的效果：图标下方会显示一个小的插入符号。

您可以在这个简化的JSFiddle 示例中看到它。

// Font Awesome Icons
$('#btn1').button({icon: 'fa fa-save'});
$('#btn2').button({icon: 'fa fa-trash'});
$('#btn3').button({icon: 'fa fa-undo'});

 /* 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;    
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h4>Replacing / Extending jQuery UI with Font Awesome</h4>


<div id="btn1">Save</div>
<div id="btn2">Delete</div>
<div id="btn3">Cancel</div>

有没有办法消除这种不良影响？

【问题讨论】：

标签： jquery-ui font-awesome

【解决方案1】：

在 CSS 中添加此规则。确保正确命名它：

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
  background-image: none;
}

演示：https://jsfiddle.net/lotusgodkk/g80ne1h7/13/

【讨论】：