如何创建字体真棒图标的禁用状态？答案

【问题标题】：How to create disabled state of the font awesome icons?如何创建字体真棒图标的禁用状态？
【发布时间】：2016-12-11 09:20:38
【问题描述】：

我正在使用超棒的字体图标，我需要将图标设置为禁用状态。有什么办法可以做到这一点。我也在使用引导程序。

这就是我使用图标的方式。

<i class="fa fa-slack"><i/>

我只需要图标看起来像灰色。

【问题讨论】：

标签： twitter-bootstrap-3 font-awesome

【解决方案1】：

基本思想就是给它的风格上色

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div>Disabled <i class="fa fa-slack" style="color: grey"></i></div>
<div>Enabled <i class="fa fa-slack"></i></div>

【讨论】：

【解决方案2】：

您可以定义您的“类似 Bootstrap”disabled 类

.fa.disabled,
.fa[disabled],
.disabled > .fa,
[disabled] > .fa {
  opacity: 0.5;
  /*optional*/ cursor: not-allowed;
  /*optional*/ pointer-events: none;
}

然后像这样使用它

<i class="fa fa-slack disabled"></i> <!-- or -->
<i class="fa fa-slack" disabled></i> <!-- or -->
<a class="btn btn-primary disabled"><i class="fa fa-slack"></i></a> <!-- or -->
<a class="btn btn-primary" disabled><i class="fa fa-slack"></i></a>

【讨论】：

【解决方案3】：

为残疾人写一个自定义类

类似

.fa-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

添加光标类型对用户体验很重要。

【讨论】：

谢谢，受这个答案的启发，我想出了这种风格：.fa[disabled] { opacity: 0.65;光标：默认； } 。不透明度：0.65 -> 引导默认不透明度，光标：默认 -> 引导默认禁用按钮光标

【解决方案4】：

您可以降低不透明度并禁用指针事件：

.disabled-button{
      opacity: 0.5;
      pointer-events: none;
 }

【讨论】：

这很完美，它会禁用任何点击事件
这也是禁用图标上的tooltip，如何启用tooltip（我们通过title=""给出）

【解决方案5】：

$("button[title='Aceptar']").prop("disabled", true);，您可以通过按钮的任何属性（第一个）选择按钮并更改属性禁用。

【讨论】：