Question

我在可点击的行中使用字体真棒图标ellipsis-v（非常小; see here），因此点击是令人沮丧的，因为大多数时候你最终点击了这一行。我尝试将链接放在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

尝试在＆lt; i ＆gt;上添加属性line-height或font-size。标签：
示例：

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

Answer 2

您只需在图标类中添加fa-nx，其中n是数字，它只会将图标的大小增加n倍。

n以下是2.您可以使用3,4 ..取决于您的设计。

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

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

2 个答案: