问题是disabled属性是针对input、button或锚元素的。您正在尝试在div中设置“disabled”。只需更改：

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

编辑：

我的错。禁用的属性不适用于锚。检查this。唯一阻止锚点被点击的方法是通过JavaScript。但你遇到的这个问题与字体可怕的图标无关

工作但不符合W3C：

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

然而，“disabled”属性与"div" tag不兼容W3C，您必须使用CSS类，并在禁用或禁用时使用JavaScript切换它。
下面是一个例子：
第一次
多样化的解决方案：

***显示：无！重要;和字体大小：0 px！重要;**会进行相同的呈现。该元素似乎不是从页面呈现的。在这种情况下，！important非常重要，它上级FontAwesome类。
***能见度：隐藏;**有点不同，因为元素仍然呈现，但它是透明的。**颜色：透明！重要;在这种情况下，**也会起同样的作用。它使它保持相同的位置和空间。

选用性：FontAwesome可用于documentation中所述的“i”标签

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