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

Question

I have the following Font Awesome icon:-

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

by default the icon color will be blank and blue when hover over it. now i want to change the icon color to red and blue on hover, so i add the following:-

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

but i lost the hover color, so i added this css:-

.fa-marker:hover
{color:blue}

but did not have any effect. any advice how i can change the hover color for the icon?

Answer 1

Use !important which ignores all other styles, the reason your code wasn't working was the style priority, all the styles given directly from style="" attribute have higher priority

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