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

Question

我正在使用字体真棒图标,我需要一个禁用状态的图标.有没有办法做到这一点.我也在使用bootstrap.

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

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

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

Answer 1

为禁用编写自定义类

就像是

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

添加光标类型对于用户体验非常重要.

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

Answer 3

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

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