Html 悬停不使用字体图标

下面是一些html和css。我需要在链接内显示悬停箭头，但我不能这样做。我怎样才能修好它

。标题文本链接{
显示：块；
宽度：278px；
高度：55px；
填充：0px 20px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px实心#fab608；
颜色：#fab608；
字号：18px；
字体系列：“Futura Demi”；
文本转换：大写；
}
.header文本链接a.svg内联--fa{
显示：无；
}
.标题文本链接a:悬停{
颜色：白色；
背景#fab608；
文字装饰：无；
证明内容：周围的空间；
}
.header文本链接a:hover.header文本链接a.svg内联--fa{
显示：块；
}

---

您使用了错误的选择器…请尝试

。标题文本链接a:hover.svg inline--fa

为什么？

为了更好地理解remove

：只需将

悬停一次，看起来就像

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

这意味着它将在

内以
.svg内联--fa
为目标。标题文本在
内再次链接a
。标题文本链接a

。标题文本链接{
显示：块；
宽度：278px；
高度：55px；
填充：0px 20px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px实心#fab608；
颜色：#fab608；
字号：18px；
字体系列：“Futura Demi”；
文本转换：大写；
}
.header文本链接a.svg内联--fa{
显示：无；
}
.标题文本链接a:悬停{
颜色：白色；
背景#fab608；
文字装饰：无；
证明内容：周围的空间；
}
.header文本链接a:hover.svg内联--fa{
显示：块；
}

---

最佳解决方案 仅css中的更改

.header-text-links a:hover > .svg-inline--fa {
    display: inline-block !important;
}

。标题文本链接{
显示：块；
宽度：278px；
高度：55px；
填充：0px 20px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px实心#fab608；
颜色：#fab608；
字号：18px；
字体系列：“Futura Demi”；
文本转换：大写；
}
.header文本链接a.svg内联--fa{
显示：无；
}
.标题文本链接a:悬停{
颜色：白色；
背景#fab608；
文字装饰：无；
证明内容：周围的空间；
}
.header文本链接a:hover>.svg内联--fa{
显示：内联块！重要；
}

---

如果您尝试了，请将其放入代码中，以便我们知道您实际使用的代码。