啟用禁用字體真棒圖標

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
  }
},