增加小图标周围的可点击区域

Question

我在可点击的行中使用字体真棒图标 ellipsis-v（非常小；see here），所以点击起来很令人沮丧，因为大多数时候你最终会点击该行. 我尝试将 link 放在 td 上，但它不起作用（因为整行都是可点击的？）。

是否有任何 css 技巧来增加 fa-icon 周围的可点击区域？（在我试过的代码下面）

<tr class='clickable-row' data-href='details.html'>
  <td></td>
  <td class="client-status"><span class="label label-warning"></span></td>
  <td>
    <a class="doDropdown">
      <div class="ibox-tools">
        <a class="dropdown-toggle doDropdown" data-toggle="dropdown">
          <i class="fa fa-ellipsis-v"></i>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="details.html">View</a>
          </li>
          <li>
            <a href="details_edit.html">Edit</a>
          </li>
        </ul>
      </div>
    </a>
  </td>
</tr>

Answer 1

尝试在 <i> 标签上添加属性行高或字体大小：
示例：

i {  
line-height: 20px;  
font-size: 20px;  
}

Answer 2

您可以简单地在图标 class 内添加 fa-nx，其中 n 是数字，它只是将图标的大小增加到原始大小的 n 倍。

下面n是2，可以根据自己的设计使用3、4..

<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>

增加小图标周围的可点击区域

increase clickable area around tiny icon

icons

font-awesome

area

clickable