How to create disabled state of the font awesome icons?

Question

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.

Answer 1

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