vergrößern anklickbare Fläche um winzige Symbol

Ich benutze die Schriftart awesome Symbol Ellipsis-v (die sehr klein ist; see here) in einer anklickbaren Zeile, so ist es frustrierend zu klicken, weil die meiste Zeit Sie am Ende auf die Zeile klicken . Ich habe versucht, den Link auf die td, aber es funktioniert nicht (weil die ganze Zeile anklickbar ist?).vergrößern anklickbare Fläche um winzige Symbol

Gibt es CSS-Tricks, um den anklickbaren Bereich um das fa-Symbol zu vergrößern? (unter dem Code habe ich versucht)

<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>

Quelle

2017-04-07 abchacker

Versuchen Sie, die Eigenschaft line-height oder font-size auf < i> -Tag hinzu:
Beispiel:

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

Quelle

2017-04-07 07:44:43 hamzox

danke! Ich habe es direkt zu .fa-ellipsis-v hinzugefügt, es macht das Icon größer. aber dann passt es nicht in mein Design. Ich könnte ein anklickbares Div mit dem Symbol innerhalb erstellen. werde das versuchen – abchacker

Kein Problem. Gib einfach deine gewünschten Werte an, ich habe nur 20px als Beispiel benutzt. Markiere auch meine Antwort als @ @chchacker: P – hamzox

es hat mein Problem nicht 100% behoben. Ich möchte nicht, dass das Symbol größer wird, ich möchte es in der gleichen Größe, aber mit einem anklickbaren Bereich um es herum, so dass es für den Benutzer einfacher ist, auf das Symbol zu klicken. Line-Höhe funktioniert für den vertikalen Teil, was wäre es für den horizontalen Teil? weil da keine linienbreite stimmt? – abchacker

können Sie fügen Sie einfach innerhalb der Symbolklasse hinzu, wobei n die Nummer ist, und es vergrößert einfach die Größe des Symbols um n mal s original.

Unter n ist 2. Sie können 3, 4 .. je nach Ihrem Design verwenden.

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

Quelle

2017-12-12 22:11:38

vergrößern anklickbare Fläche um winzige Symbol

Antwort

Verwandte Themen