Font Awesome图标hover效果失效，如何实现链接hover时显示箭头？

你的问题核心出在hover状态下图标的CSS选择器错误，重复嵌套了父元素选择器，导致无法正确匹配到图标元素。

修正后的完整代码 #

CSS部分：

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: flex; /* 现代浏览器已支持标准flex，可去掉冗余前缀 */
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
  transition: all 0.3s ease; /* 添加入场过渡，提升交互流畅度 */
}

.header-text-links a .svg-inline--fa {
  display: none;
  margin-left: 8px; /* 给图标和文字加个间距，排版更美观 */
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

/* 修正核心：去掉重复的父元素选择器，直接匹配hover状态下的子图标 */
.header-text-links a:hover .svg-inline--fa {
  display: inline-block; /* 用inline-block适配行内布局，避免独占一行 */
}

HTML部分（无需修改）：

<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class="header-text-links">
  <a class="header-text-links__works" href="#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

问题原因拆解 #

你原来的hover图标选择器写了：

.header-text-links a:hover .header-text-links a .svg-inline--fa

这个选择器的逻辑是：在.header-text-links a:hover内部，寻找嵌套在另一个.header-text-links a里的图标，但你的DOM结构里图标直接是<a>的子元素，根本不存在这种嵌套关系，所以选择器完全无法命中目标元素。

只需要简化为.header-text-links a:hover .svg-inline--fa，就能正确选中hover状态下<a>标签内的图标了。

额外优化提示 #

1. 移除了冗余的flex前缀（-webkit-box、-ms-flexbox），现在主流浏览器都支持标准的display: flex。
2. 给图标添加margin-left，避免文字和图标挤在一起。
3. 加入transition属性，让背景色、布局变化等hover效果更平滑自然。

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