Jak stworzyć wyłączony stan czcionki niesamowite ikony?

Question

Używam czcionek niesamowite ikony i muszę mieć wyłączony stan ikony. czy jest jakikolwiek sposób to zrobić. Używam również bootstrap.

Oto jak używam ikon.

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

Po prostu potrzebuję ikony, aby wyglądać jak wyszarzona.

Answer 1

Podstawowa idea jest tylko pokolorować jej styl

<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

Można zdefiniować swoje "Bootstrap-like" disabled klasa

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

a następnie używać go jak

<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

Napisz klasę niestandardową dla niepełnosprawnych

coś podobnego

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

Dodawanie typ kursora jest ważne dla użytkowników doświadczenia.