title: font-awesome icon as a link and a-checker does not like the link
body: <p>The icon is:</p>
  <pre><code> &lt;i class=&quot;fa fa-facebook&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;    font-awesome 
  </code></pre>
  <p>Page info to use this as the link to the icon. I am using [added spaces]:</p>
  <pre><code> &lt; i &gt;&lt; a href = &quot;#&quot; class=&quot;fa fa-facebook fa-3x&quot; &gt;&lt; /a &gt;&lt; /i &gt;  
  </code></pre>
  <p>a-checker result:</p>
  <pre><code>Error Line 120, Column 17: i (italic) element used.
  &lt;i&gt;&lt;a href=&quot;#&quot; class=&quot;fa fa-facebook fa-1x&quot;&gt;&lt;/a&gt;&lt;/i&gt;
  
  Repair: Replace your i elements with em or strong.
  Error Line 120, Column 20: Anchor contains no text.
  &lt;a href=&quot;#&quot; class=&quot;fa fa-facebook fa-1x&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>Repair:</p>
  <blockquote>
  <p>Add text to the a element or the title attribute of the a element or
  if an image is used within the anchor. Add Alt text to the image.</p>
  </blockquote>
  <p>The font-awesome page says to use below:</p>
  <pre><code> &lt;i class=&quot;fa fa-facebook&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;   [space added]
  </code></pre>
  <p>Which is found at: <a href="https://fontawesome.com/v4/icon/facebook" rel="nofollow noreferrer">https://fontawesome.com/v4/icon/facebook</a></p>
  <p>BUT a-checker indicates an  &quot;i&quot;  should not be used [em was suggested in the a-checker repair info], and an empty  &quot;a&quot;  anchor element should also not be used as there is no text because it is a link. And there is no text because the icon is a link.</p>
  <p>I can't seem to find a solution to not using  &quot;i&quot;   in the icon  or an  &quot;a&quot; ,the anchor element without adding text to it. If I use  &quot;e&quot;m  instead of   &quot;i&quot;, the &quot;a&quot; then does not change color upon hover any more. What do I use?</p>
  <p>A-checker also indicates that the a  anchor element is empty when the icon is a link [with no text], as follows:</p>
  <pre><code> &lt;i&gt;&lt; a href=&quot;#&quot; class=&quot;fa fa-facebook fa-1x&quot;&gt;&lt;/a&gt;&lt;/i&gt;  &lt;&lt;=== its simply a link with no text
  </code></pre>
  <p>So how do I not use &quot;a&quot; when there is no text? And what is used in place of the &quot;i&quot;  so that the hover will change the color of the &quot;a&quot; [which needs to be changed?</p>
  <p>Have tried what the repair says to do, but that doesnt work.</p>
  <p>a-checker result:</p>
  <pre><code>Error Line 120, Column 21: Anchor contains no text.
  &lt;a href=&quot;#&quot; class=&quot;fa fa-facebook fa-1x&quot; alt=&quot;facebook icon link&quot;&gt;&lt;/em&gt;&lt;/em&gt;&lt;/i&gt;&lt;/i&gt;  
                       ...
  </code></pre>
  <p>Repair:</p>
  <blockquote>
  <p>Add text to the a element or the title attribute of the a element or,
  if an image is used within the anchor, add Alt text to the image.</p>
  </blockquote>
  <p>I realise these are not very difficult questions. But I have been unable to find the answers.</p>