增加小图标周围的可点击区域
increase clickable area around tiny icon
我在可点击的行中使用字体真棒图标 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>
尝试在 <i> 标签上添加 属性 行高或字体大小:
示例:
i {
line-height: 20px;
font-size: 20px;
}
您可以简单地在图标 class 内添加 fa-nx
,其中 n
是数字,它只是将图标的大小增加到原始大小的 n
倍。
下面n
是2,可以根据自己的设计使用3、4..
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
我在可点击的行中使用字体真棒图标 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>
尝试在 <i> 标签上添加 属性 行高或字体大小:
示例:
i {
line-height: 20px;
font-size: 20px;
}
您可以简单地在图标 class 内添加 fa-nx
,其中 n
是数字,它只是将图标的大小增加到原始大小的 n
倍。
下面n
是2,可以根据自己的设计使用3、4..
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>