Пользовательский интерфейс jQuery с Font Awesome нежелательным эффектом (с jQuery 3.2.1) - PullRequest
Новая
       14

Пользовательский интерфейс jQuery с Font Awesome нежелательным эффектом (с jQuery 3.2.1)

0 голосов
/ 11 мая 2018

Чтобы использовать пользовательский интерфейс jQuery с иконками Font Awesome, я следовал советам, данным @Brombomb и @Clever в Расширение иконок пользовательского интерфейса jQuery с помощью 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>

Есть ли способ избавиться от этого нежелательного эффекта?

1 Ответ

0 голосов
/ 11 мая 2018

Добавьте это правило в 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/

...