title: How can I add an href to a fontawesome icon and word below it?
body: <p>I created the following:</p>
  
  <pre><code>        &lt;div style="margin-top: 1.2em"&gt;
              &lt;i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"&gt;&lt;/i&gt;
              &lt;i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"&gt;&lt;/i&gt;
              &lt;i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"&gt;&lt;/i&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Can someone tell me how I can make it so clicking on one of these icons or a word below it takes me to a link? </p>
  
  <p>What I would like to do is to make it so the icons appear like this:</p>
  
  <pre><code> xxxxxx     xxxxxx     xxxxxx
   xxxxxx     xxxxxx     xxxxxx
   xxxxxx     xxxxxx     xxxxxx
  
    Home       Admin     Setting 
  </code></pre>
  
  <p>So that when I click anywhere from the top of the icon to the bottom of the words below that this is the same as clicking in an:</p>
  
  <pre><code> &lt;a href="/home"&gt;Home&lt;/a&gt;
   &lt;a href="/admin"&gt;Admin&lt;/a&gt;
   &lt;a href="/setting"&gt;Setting&lt;/a&gt;
  </code></pre>
  
  <p>link. </p>
  
  <p><strong>Update</strong></p>
  
  <p>I believe maybe I need a solution that uses DIVs. I tried both answers given to me and both make the icons appear vertical. Also the second answer maybe is not idea as it has multiple hrefs for the same link. Hope someone can help out with another answer.</p>