admin管理员组文章数量:1335125
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 ?
Share Improve this question edited Sep 27, 2016 at 21:34 RKCY asked Sep 27, 2016 at 21:11 RKCYRKCY 4,13516 gold badges63 silver badges99 bronze badges 10-
2
What does
disabled
to the the div? It's an attribute for aninput
not a div. Also, divs don't havehref
s. 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
Reset to default 0The 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
}
},
本文标签: javascriptenable disable fontawesome iconStack Overflow
版权声明:本文标题:javascript - enable disable font-awesome icon - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742228162a2436715.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论