Font Awesome：如何为fa-icon添加鼠标指针悬停效果

你之前加的fa-hand-pointer是Font Awesome的图标类，作用是显示手型图标，不是用来改变鼠标指针样式的，所以没用。要实现鼠标悬停时显示指针，得用CSS的cursor属性，以下是几种可行方法：

• 自定义CSS类（推荐，方便复用）
  先在样式文件里定义类：

  .pointer-hover {
    cursor: pointer;
  }
  

  再把这个类加到你的fa-icon标签上：

  <fa-icon aria-hidden="true" class="ng-fa-icon file excel pointer-hover" ng-reflect-ng-class="file-excel" ng-reflect-icon-prop="far, file excel"></fa-icon>
  

• 内联样式（快速测试用）
  直接在标签里加style属性：

  <fa-icon aria-hidden="true" class="ng-fa-icon file excel" style="cursor: pointer;" ng-reflect-ng-class="file-excel" ng-reflect-icon-prop="far, file excel"></fa-icon>
  

• 全局设置（所有fa-icon都生效）
  如果想让页面里所有fa-icon都有这个效果，直接给fa-icon标签全局设置样式：

  fa-icon {
    cursor: pointer;
  }
  

要是设置后还是没效果，打开浏览器开发者工具检查一下，看是不是有其他优先级更高的CSS样式覆盖了cursor属性，调整一下样式优先级就行。

内容的提问来源于stack exchange，提问作者Jon