Question

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

中提供

然而，当使用jQuery 3.2.1时，悬停在按钮上方时会显示不需要的效果：图标下方会显示一个小符号字符。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

有没有办法摆脱这种不良影响？

Answer 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/

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

1 个答案: