将鼠标移到图标上时无法更改 Font Awesome 图标颜色答案

【问题标题】：Unable to change the Font Awesome icon color when moving the mouse over the icon将鼠标移到图标上时无法更改 Font Awesome 图标颜色
【发布时间】：2020-08-25 22:39:04
【问题描述】：

我有以下 Font Awesome 图标：-

<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" ></i></a> |

默认情况下，将鼠标悬停在图标上时，图标颜色将为空白和蓝色。现在我想在悬停时将图标颜色更改为红色和蓝色，所以我添加以下内容：-

<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a> |

但我失去了悬停颜色，所以我添加了这个 css：-

.fa-marker:hover
{color:blue}

但没有任何效果。有什么建议可以改变图标的悬停颜色吗？

【问题讨论】：

标签： html css fonts font-awesome

【解决方案1】：

使用!important 忽略所有其他样式，您的代码不起作用的原因是样式优先级，所有直接从style=""attribute 给出的样式具有更高的优先级

.fa-marker:hover {
  color: blue !important
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a>

【讨论】：