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