Lighthouse suggesting to [fix my a href text][1]

I have a html like that 

    &lt;a href=&quot;https://twitter.com/@some-name-here&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; class=&quot;social-icon twitter grayscale&quot;&gt;&lt;/a&gt;

What is really happens here is I just displaying the image inside a href by using css class:

    .social-icon.twitter {
      background: url(&#39;../images/logo-twitter.png&#39;) no-repeat center center;
    }

I can&#39;t do `&lt;a....&gt;Twitter&lt;/a&gt;` as in that case the displayed text will destroy the view. 

I can&#39;t think of anything else like just putting a `span` with a text inside my `a` and make it hidden e.g `&lt;a....&gt;&lt;span class=&quot;hide&quot;&gt;Twitter&lt;/span&gt;&lt;/a&gt;` but wonder if there is any proper solution?

Any recommendations on that?


  [1]: https://dequeuniversity.com/rules/axe/2.2/link-name?application=lighthouse

All Lighthouse Solutions on Gang of Coders

Total of 1 Lighthouse Solutions

How to fix Lighthouse "Links do not have a discernible name"