title: How to make <a href> clickable without text
body: <p>I have a table which contain a bunch of links. The links contain no text, instead I'm using the css attribute <code>content</code> to define the look of the links (in this case, the links contain the symbols of facebook, instagram and twitter). So far it looks like it should, but I cannot click on them. I want to avoid using <code>&amp;nbsp;</code>, so what could I do?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;table style="width: 100%"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="fblink"&gt;
                      &lt;a href="http://www.facebook.com/ladygaga" target="_blank"&gt;&lt;/a&gt;
             &lt;/td&gt;
              &lt;td class="twlink"&gt;
                  &lt;a href="http://twitter.com/LadyGaga" target="_blank"&gt;&lt;/a&gt;
             &lt;/td&gt;
              &lt;td class="iglink"&gt;
                  &lt;a href="http://instagram.com/ladygaga" target="_blank"&gt;&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>table{
     border-collapse: seperate;
     border-spacing: 10px 0;
  }
  
  .fblink{
     background: blue;
  }
  .fblink:before{ 
     content:'\f30c';
  }
  
  
  .twlink{
     background: lightblue;
   }
  .twlink:before{ 
     content:'\f309';
   }
  
  .iglink{
     background: red;
  
   }
  .iglink:before{ 
     content:'\f32d';
   }
  </code></pre>
  
  <p>Can someone help me out? I created a Fiddle for it <a href="http://jsfiddle.net/Qf99d/" rel="nofollow">http://jsfiddle.net/Qf99d/</a></p>
  
  <p>Thanks in advance</p>