如何修复 Lighthouse“链接没有可识别的名称”

我有一个这样的 html

 <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

这里真正发生的是我只是通过使用 css 类在 href 中显示图像：

 .social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

我不能做 <a....>Twitter</a> 因为在那种情况下显示的文本会破坏视图。

我想不出其他任何东西，比如在我的 --- 中放置一个 span a 并使其隐藏，例如 <a....><span class="hide">Twitter</span></a> 解决方案？

有什么建议吗？