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

问题描述：

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

这就是我如何使用图标。

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

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

答

的基本思想就是以色彩的风格

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

答

你可以定义你的 “引导式” 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 -->

答

写像

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

为残疾人

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

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

相关推荐