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 can decrease the opacity and disable the pointer events:

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