启用禁用字体真棒图标

Question

我有向下箭头字体很棒的图标。 出于某些验证原因，我尝试禁用该图标。 但是当我给出“禁用”选项时，它不起作用。

<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);
    }
}

我的代码有什么问题？

Answer 1

问题是禁用属性用于输入、按钮或锚元素。 您正在尝试在 div 中设置“禁用”。 只需更改：

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

与：

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

编辑：

我的不好。 禁用 attr 不适用于锚点。 检查这个。 防止锚点被点击的唯一方法是通过 JavaScript。 但是您遇到的这个问题与字体真棒图标无关

Answer 2

工作但不符合 W3C：

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

但是，“禁用”属性与 W3C 不兼容“div”标签，您必须改用 CSS 类，并在禁用与否时使用 JavaScript 切换它。

这是一个例子：

 .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>

多样化的解决方案：

• 显示：无！重要； 和字体大小：0px !important; 进行相同的渲染。 该元素似乎未从页面呈现。 !important 在这种情况下很重要，它优于 FontAwesome 类。
• 可见性：隐藏； 有点不同，因为元素仍然被渲染，但它是透明的。 颜色：透明！重要； 在这种情况下也将起作用。 它保持相同的位置和空间。

可选： FontAwesome 用于在“i”标签中使用，如文档中所述

Answer 3

VueJS 代码：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()">

使用js，请勾选禁用I标签

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