Как создать отключенное состояние шрифта?

Я использую шрифты awesome icons, и мне нужно отключить состояние значков. Есть какой-либо способ сделать это. Я также использую bootstrap.

Вот как я использую значки.

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

Мне просто нужно, чтобы значок выглядел серым.

Ответ 1

Напишите пользовательский класс для отключенных

Что-то вроде

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

Добавление типа курсора важно для пользователей.

Ответ 2

Вы можете определить свой "Bootstrap-подобный" класс disabled

.fa.disabled,
.fa[disabled],
.disabled > .fa,
[disabled] > .fa {
  opacity: 0.5;
  /*optional*/ cursor: not-allowed;
  /*optional*/ pointer-events: none;
}

а затем использовать его как

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

Ответ 3

Основная идея - просто покрасить свой стиль

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

Ответ 4

Вы можете уменьшить непрозрачность и отключить события указателя:

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