'enable disable font-awesome icon

I have down arrow font-awesome icone. I try to disable the icon for some validation reason . But when i given a option 'disable' , it is not working. 

<div class="arrow bounce text-center" >
     <div class="fa fa-arrow-circle-down fa-3x " style="padding-bottom: 2px;" disabled="disabled"></div>
</div>

.arrow {
    text-align: center;
    margin:40px 0px;
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%,
    20%,
    30%,
    40%,
    50% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-15px);
    }
}

what is wrong in my code here ?

javascriptcsshtml


Solution 1:[1]

The problem is tha disabled attribute is for input, button or anchor elements. You are trying to set "disabled" in a div. Just change:

<div class="fa fa-arrow-circle-down fa-3x custom-color" href="#" style="padding-bottom: 2px;" disabled="disabled"></div>

with:

<a class="fa fa-arrow-circle-down fa-3x custom-color" href="#" style="padding-bottom: 2px;" disabled="disabled"></a>

Edit:

My bad. Disabled attr is not for anchor. Check this. The only way to prevent the anchor to be clicked is via JavaScript. But this issue you have is not related with the font-awesome icons

Solution 2:[2]

Working but non W3C conform:

.fa[disabled] {
    display: none !important;
}

However the "disabled" attribute isn't W3C compatible with the "div" tag, you have to use a CSS class instead and toggle it with JavaScript when disabled or not.

Here is an exemple :

.fa.disabled {
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<button onclick="$('#AppleLogo').toggleClass('disabled');">Pop/unpop Apple</button>
<br/>
<i id="AppleLogo" class="fa fa-apple fa-3x" aria-hidden="true"></i>

Diverse solutions :

  • display: none !important; and font-size: 0px !important; makes the same render. The element seems not rendered from the page. The !important is important in that case to be superior to FontAwesome classes.
  • visibility: hidden; is a bit different because the element is still rendered, but it is transparent. color: transparent !important; will also work the same in that case. It keeps it same place and space.

Optional: FontAwesome is made to be used in "i" tag as described in the documentation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2

Related Questions