如何扩展锚元素的可点击半径以填充包含的div？

Question

<div class="social facebook">
        <a class="nostyle" href ="www.facebook.com">
            <i class="fa fa-facebook fa-2x"></i>    
        </a>
    </div>

给出上面的代码，我想知道如何扩展锚标记的“可点击区域”。

问题如下：我已成功重定向到Facebook页面，但是我只能单击图标本身（我的有效可点击区域是图标本身），并且我想对此进行更改，以便在单击这个圈子我也会被重定向。

我的CSS看起来像这样：

.social{
text-align:center;
width:60px;
height:60px;
float:left;
background:rgb(255,255,255);
border:1px solid rgb(204,204,204);
box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
border-radius:100px;
margin:0 10px 10px 0;
padding:12px;

}

Answer 1

我会将链接环绕在圆形DIV中：

    <a class="nostyle" href ="www.facebook.com">
      <div class="social facebook">
        <i class="fa fa-facebook fa-2x"></i>    
       </div>
    </a>