CODEWITHSUNDEEP
twitter-bootstrap-3font-awesome
ajm
ajm

Reputation: 13213

How to create disabled state of the font awesome icons?

I am using font awesome icons and I need to have a disabled state of the icons. is there any way to do this. I am also using bootstrap.

This is how I am using icons.

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

I just need the icon to look like grayed out.

Upvotes: 26

Views: 60267

Answers (5)

Jorge Vivanco
Jorge Vivanco

Reputation: 1

$("button[title='Aceptar']").prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.

Upvotes: -1

Sergej
Sergej

Reputation: 1092

You could define your "Bootstrap-like" disabled class

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

and then use it like

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

Upvotes: 20

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

You can decrease the opacity and disable the pointer events:

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

Upvotes: 5

Neville
Neville

Reputation: 528

Write a custom class for disabled

Something like

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

Adding cursor type is important for users experience.

Upvotes: 40

Season
Season

Reputation: 4376

The basic idea is just to color its style

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

Upvotes: 6

Related Questions