悬停字体真棒图标时更改颜色？

Posted 2023-02-22

【中文标题】悬停字体真棒图标时更改颜色？

【英文标题】：Change color when hover a font awesome icon?

【发布时间】：2014-11-04 09:46:57

【问题描述】：

在 Font Awesome documentation 中创建这个图标：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

这段代码创建了这个html：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

这是一个堆叠的旗帜图标。我想更改 Hover 事件的图标颜色，我尝试了所有这些：

.fa-stack:hover
color: red

.fa-stack i:hover
color: red

.fa-stack i before:hover
color: red

但不工作。

【问题讨论】：

应该是颜色：红色；

检查你的 CSS 语法

是一个错字，但问题仍然存在

【参考方案1】：

如果您只想更改 hover 上标志的颜色，请使用：

http://jsfiddle.net/uvamhedx/

.fa-flag:hover 
    color: red;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-flag fa-3x"></i>

【讨论】：

并使用 Font Awesome 5 ？ use.fontawesome.com/releases/v5.0.4/js/all.js

@Kiquenet 你的问题有 codepen 或 jsffiddle 吗？

【参考方案2】：

使用 - !important - 覆盖默认黑色

.fa-heart:hover
   color:red !important;

.fa-heart-o:hover
   color:red !important;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-heart fa-2x"></i>
<i class="fa fa-heart-o fa-2x"></i>

【讨论】：

!important真的有必要吗？许多人认为它是编程中的反模式。

使用重要不是一个好的解决方案，因为它不能被覆盖。您可以使用特异性覆盖所有非内联 css

不幸的是，我不得不使用 !important 才能使其正常工作，但该图标也在 ag-Grid 中，如果这意味着什么的话。对于 Angular 项目，我还必须将它放在 styles.css 文件中 - 它在 component.css 中不起作用