如何創建禁用狀態的字體真棒圖標？

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

爲殘疾人

東西的自定義類添加遊標類型是用戶體驗很重要。