web-dev-qa-db-ja.com

フォントの素晴らしいアイコンの無効状態を作成する方法は？

フォントの素晴らしいアイコンを使用していますが、アイコンを無効状態にする必要があります。これを行う方法はありますか。ブートストラップも使用しています。

これがアイコンの使用方法です。

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

アイコンがグレー表示になっている必要があります。

twitter-bootstrap-3font-awesome
14
ashishjmeshram

無効のカスタムクラスを作成する

何かのようなもの

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

カーソルタイプの追加は、ユーザーエクスペリエンスにとって重要です。

21
Neville

「ブートストラップのような」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>
13
Sergej

基本的な考え方は、そのスタイルに色を付けることです

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

不透明度を下げて、ポインターイベントを無効にすることができます。

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