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.
$("button[title='Aceptar']"). prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.
If an icon is not an interactive element The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span> , with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
Go to font awesome official website and download free zip file, extract it and link this to your page, done..! To be able to use font awesome offline you would have to manually download the icons to your local computer. You should be able to find the required files from the font awesome website.
Write a custom class for disabled
Something like
.fa-disabled { opacity: 0.6; cursor: not-allowed; }
Adding cursor type is important for users experience.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With