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

【问题标题】：How to adjust table row height when using font-awesome icon in bootstrap 4?在 bootstrap 4 中使用 font-awesome 图标时如何调整表格行高？
【发布时间】：2020-05-11 02:42:12
【问题描述】：

每当我在我的表格上添加字体真棒图标时，我的表格行高都会增加。我正在使用 bootstrap 4 和 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>

当在 bootstrap 4 中使用 font-awesome 时

当我增加图标大小时，这里的图标很小，我的行高也会增加

我希望这个图标大小和行高完美

当我使用 font-awesome 图标时，我的表格行高会增加，当我删除 class="fa fa-edit" 时，我的表格看起来不错，表格行高变短。我想调整字体真棒图标和我的表格行高，但我无法做到。

为了解决这个问题，我在<i> 中添加了style="font-size:30px"，然后我的字体图标在我的表格行上正确可见，但表格行高增加了这看起来很奇怪。我想增加图标的font-size，但不想增加表格行高，或者我也想手动调整表格行高。为此，我使用了<td height="100">，但它没有用。 <tr height="100"> 但它不适用于字体真棒图标。

您的宝贵建议对像我这样的初学者会有很大帮助。谢谢。

【问题讨论】：

你能展示更多你的代码吗？我无法复制您关注的问题
Font Awesome Icons cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/…"> stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/…" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
产品价格 Category Featured Sold

td>

标签： php jquery html css bootstrap-4

【解决方案1】：

首先，.table-condensed 被 Bootstrap 4 所取代。请改用.table-sm。

其次，在图标变得如此之大以至于增加行高之前，几乎没有调整空间。您可以通过.table-sm 删除单元格的填充.3rem，但这是您唯一可以做的。

演示： http://jsfiddle.net/davidliang2008/uj1p9owa/

默认字体大小有什么问题？我觉得它看起来很酷。

【讨论】：