如何在没有文本的情况下使<a href>可点击

Question

我有一个包含一堆链接的表.链接不包含文本,而是使用css属性content来定义链接的外观(在这种情况下,链接包含facebook,instagram和twitter的符号).到目前为止它看起来应该如此,但我无法点击它们.我想避免使用 ,所以我该怎么办？

这是我的HTML:

<table style="width: 100%">
    <tbody>
        <tr>
            <td class="fblink">
                    <a href="http://www.facebook.com/ladygaga" target="_blank"></a>
           </td>
            <td class="twlink">
                <a href="http://twitter.com/LadyGaga" target="_blank"></a>
           </td>
            <td class="iglink">
                <a href="http://instagram.com/ladygaga" target="_blank"></a>
            </td>
         </tr>  
    </tbody>
</table>

我的CSS:

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';
 }

有人可以帮我吗？我为它创建了一个小提琴http://jsfiddle.net/Qf99d/

提前致谢

Answer 1

您正在将错误的元素添加到错误的位置......它们应该位于锚链接内而不是表格单元格中

的jsfiddle

CSS

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}
tr td a  {
    display: block;
    text-decoration: none;
    width:100%; /* make anchor full widths */
}
a:before {
    color:white;

}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c'; /* now inside anchor */
}


.twlink{
    background: lightblue;
}
.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}