增加可點擊區域周圍的小圖標

我在可點擊的行中使用字體真棒圖標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>

來源

2017-04-07 abchacker

嘗試添加屬性行高或字體大小上< 我>標記：
示例：

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

來源

2017-04-07 07:44:43 hamzox

謝謝！我直接將它添加到.fa-ellipsis-v，它使圖標更大。但那麼它將不適合我的設計。我可以創建一個帶有圖標的可點擊的div。要試試這個 – abchacker

沒問題。只要給你想要的值，我只用20px作爲例子。另外，請將我的答案標記爲正確@abchacker：P – hamzox

它沒有解決我的問題100％。我不希望圖標變大，我希望它具有相同的尺寸，但周圍有可點擊的區域，因此用戶可以輕鬆點擊該圖標。垂直部分的線高度工作，水平部分會如何？因爲沒有行寬的權利？ – abchacker

你可以只需在圖標類中添加，其中n是數字，它只是將圖標大小增加n倍原創。

在n以下是2.您可以使用3，4 ..取決於您的設計。

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

來源

2017-12-12 22:11:38

增加可點擊區域周圍的小圖標

回答

相關問題