twitter-bootstrap-3 - color - font awesome size

¿Cómo crear el estado deshabilitado de los íconos geniales de la fuente?

Question

Estoy usando iconos increíbles de fuentes y necesito tener un estado desactivado de los íconos. hay alguna manera de hacer esto? También estoy usando bootstrap.

Así es como estoy usando iconos.

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

Solo necesito que el ícono se vea atenuado.

Answer 1

La idea básica es simplemente colorear su estilo

<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

Escribir una clase personalizada para discapacitados

Algo como

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

Agregar el tipo de cursor es importante para la experiencia de los usuarios.

Answer 3

Podrías definir tu clase de disabled "tipo Bootstrap"

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

y luego usarlo como

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