Wie erstellt man deaktivierten Zustand der Schriftart super Symbole?

Question

Ich verwende font awesome Symbole und ich muss einen deaktivierten Zustand der Symbole haben. Gibt es einen Weg dies zu tun? Ich benutze auch Bootstrap.

So verwende ich Symbole.

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

Ich brauche nur das Symbol wie ausgegraut aussehen.

Answer 1

Die Grundidee ist einfach seine Art zu färben

<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

Sie Ihre "Bootstrap-like" disabled Klasse

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

und dann verwenden, wie

definieren könnte

<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

Schreiben Sie eine benutzerdefinierte Klasse für Behinderte

So etwas wie

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

Cursor-Typ wichtig ist für die Benutzer hinzufügen.