increase clickable area around tiny icon

Question

i am using the font awesome icon ellipsis-v (which is very tiny; see here) in a clickable row, so it's frustrating to click, because most of the time you end up clicking on the row. i tried putting the link on the td, but it's not working (because the whole row is clickable?).

are there any css tricks to increase the clickable area around the fa-icon? (below the code i tried)

<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

Try adding the property line-height or font-size on <i> tag:
Example:

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