작은 아이콘 주위에 클릭 가능 영역이 늘어납니다.

나는 굉장한 아이콘 인 ellipsis-v (매우 작음) (see here)를 클릭 가능한 행에 사용하고 있기 때문에 대부분의 시간에 행을 클릭하기 때문에 클릭하기가 어렵습니다. . td에 링크를 넣으려고했지만 전체 행을 클릭 할 수 있기 때문에 작동하지 않습니다.작은 아이콘 주위에 클릭 가능 영역이 늘어납니다.

fa 아이콘 주위의 클릭 가능 영역을 늘리기위한 CSS 트릭이 있습니까?
예 :

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

출처

2017-04-07 abchacker

시도가 < I> 태그의 속성 라인 높이 또는 폰트 크기를 추가 (코드 아래 나 시도) 간단히 아이콘 클래스 안에 을 추가하십시오. n은 숫자이고 아이콘의 크기는 단순히 n 번 증가합니다 원본.

이하 n은 2입니다. 디자인에 따라 3,4를 사용할 수 있습니다.

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

출처

2017-04-07 07:44:43 hamzox

감사합니다. 나는 그것을 .fa-ellipsis-v에 직접 추가했다. 아이콘을 더 크게 만든다. 그러나 그것은 나의 디자인에 맞지 않을 것이다. 아이콘이있는 클릭 가능한 div를 만들 수 있습니다. 이걸 시도 해봐. – abchacker

문제 없습니다. 원하는 값을 지정하기 만하면 20px를 예제로 사용했습니다. 또한 내 대답을 올바른 @abchacker : P – hamzox

으로 표시하여 문제가 100 % 수정되지 않았습니다. 아이콘이 커지기를 원하지는 않습니다. 같은 크기로 클릭 할 수있는 영역이 있어야하므로 사용자가 아이콘을 클릭하기가 더 쉽습니다. 라인 높이가 수직 부분에 대해 작동하면 수평 부분에 대해 어떻게 될까요? 선폭이 없기 때문에? – abchacker

할 수

<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-12-12 22:11:38

작은 아이콘 주위에 클릭 가능 영역이 늘어납니다.

답변

관련 문제