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

Question

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

这就是我如何使用图标。

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

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

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

Answer 2

你可以定义你的 “引导式” disabled类

.fa.disabled, 
.fa[disabled], 
.disabled > .fa, 
[disabled] > .fa { 
    color: lightgrey; 
    /*or*/ opacity: 0.5; 
} 

，然后使用它像

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

Answer 3

写像

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

为残疾人

东西的自定义类添加游标类型是用户体验很重要。