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

dpklt4291
dpklt4291 我试过<tdclass=“container”><style>td.container>div{width:100%;身高:100%;溢出:隐藏;}td.container{height:20px;}</style>但它也不适用于font-awesome图标。在bootstrap4。
接近 2 年之前 回复
douxie2029
douxie2029 <tableclass=“tabletable-borderedtable-condensedtable-stripped”><thead><th></th><th>Product</th><th>Price</th><th>Category</th><th>精选</th><th>已售出</th></thead><tbody><tr><!-这是问题-><td><iclass=“fafa-edit“style=”font-size:30px;color:red“></i></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></body></html>
接近 2 年之前 回复
douke9379
douke9379 <!DOCTYPEhtml><html><head><title>字体真棒图标</title><metaname=“viewport”content=“width=device-width,initial-scale=1”><linkrel=“stylesheet“href=”cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/...“><linkhref=”stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/...“rel=“stylesheet”integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO”crossorigin=“anonymous”></head><body>
接近 2 年之前 回复
doumi1944
doumi1944 你能展示更多的代码吗?我无法复制您关注的问题
接近 2 年之前 回复

1个回答



首先, .table-condensed </ code>已经用于 Bootstrap 4 </ code>。 请改用 .table-sm </ code>。</ p>

其次,在图标变得太大以至于增加行高之前,只有很小的空间可以调整。 您可以通过 .table-sm </ code>删除单元格的填充 .3rem </ code>,但这是您唯一能做的事情。</ p>

小提琴:</ strong> http://jsfiddle.net/aq9Laaew/125332/ </ p >

默认字体大小有什么问题? 我觉得它看起来很酷。</ p>

</ p>
</ div>

展开原文

原文

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问