Whenever I add font-awesome icon on my table my table row height increases. I am using bootstrap 4 and font-awesome 4.7.0
<table class="table table-bordered table-condensed table-stripped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<tr>
<!-- Here is the problem-->
<td><i class="fa fa-edit" style="font-size:30px;color:red"></i></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
When Use font-awesome in bootstrap 4
See icon is small here when I increase icon size my row height also increases
I want this icon size and row height is perfect
when I use font-awesome icon then my table row height increase and when I remove class="fa fa-edit"
then my table look ok and table row height get short. I want to adjust font-awesome icon and my table row height but I am unable to do it.
For solving this problem I add style="font-size:30px"
in <i>
then my font icon visible properly on my table row but table row height increases which look odd. I want to increase font-size
of my icon but do not want to increase my table row height or I also want to adjust my table row height manually. For this I have used <td height="100">
but it did not work.
<tr height="100">
but it did not work with font-awesome icon.
Your valuable suggestions would be a great help for a beginner like me. Thank You.