Visible focus using font awsome icon
<p>I am trying to set the visible focus when tabbing to a fontawesome icon wrapped in an a href.</p>

<pre><code>&lt;a href="#" class="expand_collapse" aria-hidden="true"&gt;
        &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
    &lt;/a&gt;
</code></pre>

<p>If I add a word into the mix. the word gets focus when tabbed to.</p>

<pre><code>&lt;a href="#" class="expand_collapse" aria-hidden="true"&gt;
        &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
       Hello Bob!
    &lt;/a&gt;
</code></pre>

<p>What is the best way to add a visible focus to the icon area?</p>