Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create disabled state of the font awesome icons?

Tags:

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.

like image 628
ashishjmeshram Avatar asked Aug 05 '16 04:08

ashishjmeshram


People also ask

How do I disable font awesome icons?

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

How do I make font awesome icons accessible?

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.

How do I make font awesome offline?

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.


1 Answers

Write a custom class for disabled

Something like

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

Adding cursor type is important for users experience.

like image 132
Neville Avatar answered Sep 23 '22 07:09

Neville