Comment créer l'état désactivé de la police impressionnant icônes?

Je suis en utilisant la police impressionnant icônes et j'ai besoin d'avoir un état désactivé des icônes. est-il possible de le faire. Je suis également en utilisant bootstrap.

C'est la façon dont je suis à l'aide d'icônes.

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

J'ai juste besoin de l'icône pour ressembler grisé.

OriginalL'auteur ashishjmeshram | 2016-08-05

  1. 19

    Écrire une classe personnalisée pour les personnes handicapées

    Quelque chose comme

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

    L'ajout de type de curseur est important pour les utilisateurs de l'expérience.

    OriginalL'auteur Neville

  2. 12

    Vous pouvez définir votre "Bootstrap" comme de la disabled classe

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

    et de l'utiliser ensuite comme

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

    OriginalL'auteur Sergej

  3. 1

    Vous pouvez diminuer l'opacité et de désactiver les événements de pointeur:

    .disabled-button{
      opacity: 0.5;
      pointer-events: none;
 }

    OriginalL'auteur Premshankar Tiwari