Question

我有向下箭头字体 - 真棒icone。出于某些验证原因，我尝试禁用该图标。但是，当我给出一个选项＆＃39;禁用＆＃39; ，它不起作用。

<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

工作但不符合W3C：

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

但是“禁用”属性与"div" tag不兼容W3C，您必须使用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>

多种解决方案：

显示：无！重要; 和 font-size：0px！important; 进行相同的渲染。该元素似乎未从页面呈现。在这种情况下，重要的是重要的是优于FontAwesome类。
visibility：hidden; 有点不同，因为该元素仍然呈现，但它是透明的。 颜色：透明！重要; 在这种情况下也会起作用。它保持相同的位置和空间。

可选：如documentation

中所述，使FontAwesome用于“i”标签

Answer 2

问题是禁用属性是输入，按钮或锚元素。您正尝试在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不适用于锚点。检查this。防止点击锚点的唯一方法是通过JavaScript。但是你遇到的这个问题与字体很棒的图标
无关

启用禁用font-awesome图标

2 个答案: