小さなアイコンの周りでクリック可能な領域を増やす

私はフォントの素晴らしいアイコンellipsis-v（これは非常に小さい; see here）をクリック可能な行に使用しているので、ほとんどの時間は行をクリックすることになるので、。私はtdにリンクを張そうとしましたが、（行全体がクリック可能なので）動作していません。小さなアイコンの周りでクリック可能な領域を増やす

faアイコンの周りにクリック可能な領域を増やすためのCSSトリックはありますか？（私が試したコードの下）

<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

小さなアイコンの周りでクリック可能な領域を増やす

答えて

関連する問題