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 ?

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 ?

• javascript
• css
• html

• 2 What does disabled to the the div? It's an attribute for an input not a div. Also, divs don't have hrefs. What are you trying to do? – Paulie_D Commented Sep 27, 2016 at 21:14
• Trying to disable the font icon. So used disabled property. but it is not working. – RKCY Commented Sep 27, 2016 at 21:16
• 4 It wouldn't, it's not an attribute that applies to divs. Plus your HTML & CSS don't match. – Paulie_D Commented Sep 27, 2016 at 21:16
• developer.mozilla/en-US/docs/Mozilla/Tech/XUL/Attribute/… – Paulie_D Commented Sep 27, 2016 at 21:18
• It seems that you've left out some information/code. You have CSS animations but don't see them being applied to your HTML. How is this being acplished? – hungerstar Commented Sep 27, 2016 at 21:19

3 Answers 3

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

Working but non W3C conform:

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

However the "disabled" attribute isn't W3C patible 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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

Code for VueJS: with html:

<div class="arrow bounce text-center" >
 <div class="fa fa-arrow-circle-down fa-3x " style="padding-bottom: 2px;" v-bind:style="disabled ? 'color: #b7b7b7' : '' " @click="toDoFunc()">

with js, please check it to disable I tag

toDoFunc: function() {
  if (!disabled ) {
   //to do if condition true
  }
},