dongmu1914
dongmu1914
2018-07-31 13:17

在bootstrap 4中使用font-awesome图标时如何调整表格行高?

已采纳

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

enter image description here

I want this icon size and row height is perfect

enter image description here

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doutu3352 doutu3352 3年前

    First of all, .table-condensed is gone for Bootstrap 4. Use .table-sm instead.

    Secondly, there is only little room to adjust before the icons get so big that they increase the row height. You can remove the cell's padding .3rem by .table-sm but that's the only thing you can do.

    fiddle: http://jsfiddle.net/aq9Laaew/125332/

    What's wrong with the default font size? I think it looks cool.

    enter image description here

    点赞 评论 复制链接分享