html - 如何使 Font Awesome 图标按钮处于禁用状态？

Question

我正在使用字体很棒的图标按钮，我需要使图标处于禁用状态。我可以使用 Bootstrap 禁用类使其看起来像禁用按钮，但它是可点击的。有什么方法可以使它不可点击吗？

这是我的 HTML 代码:--

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
  <i class="fa fa-search"></i>
</button>

Answer 1

使用pointer-events: none;

button{
    pointer-events: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
  <i class="fa fa-search"></i>
</button>