Как создать отключенное состояние шрифта? Я использую шрифты 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; }
Ответ 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; }