字体真棒图标被切断答案

【问题标题】：Font Awesome Icon is getting cut off字体真棒图标被切断
【发布时间】：2021-02-09 23:40:33
【问题描述】：

字体真棒图标在左侧被截断。

快照

下面是我的代码

<div class="media-left">
  <i class="fa fa-search fa-5x text-white"></i>
</div>

CSS

.media-left{
 display: table-cell;
 vertical-align: top;
 }
    .text-white {
        color: #fff;
    }
    .fa-5x {
        font-size: 5em;
    }

【问题讨论】：

对我来说很好bootply.com/8SbYIL3uPY。如果您创建了更多的表格单元格，那么可能是因为 - 如果您有一列占用了太多空间，那么它可能会导致其他单元格被压扁
无法复制您的问题jsfiddle.net/tejaspatil6191/605zq8hc

标签： html css twitter-bootstrap-3 font-awesome

【解决方案1】：

它可能会解决您的问题letter-spacing: 1px;

【讨论】：

【解决方案2】：

可能是因为你使用了 5x 大字体

你也可以使用小搜索图标

<div class="media-left">
  <i class="fa fa-search fa-4x text-white"></i>
</div>

它可能会解决您的问题

【讨论】：

不！字体大小不是导致问题的原因。
那么你必须为 media-left 提供填充
我知道。我想知道为什么会被剪掉
它会被截断，因为字体宽度很大而元素宽度不是那么大，所以如果你给填充它会从填充中取 5px 宽度，看起来还不错

【解决方案3】：

由于您使用的是display: table-cell;，因此图标本身不会或至少不应导致此问题。可能是另一个table-cell 导致了这个或其他原因。由于您没有提供其他代码，因此我无法说出是什么原因造成的，因此我只能为您提供其他解决方案。

既然您希望icon 围绕一个正方形，那么如何使用display: inline-block 请参阅下面的sn-p：

.media-left{
    display: inline-block;
    vertical-align: top;
    background-color: black;
}
.text-white {
    color: #fff;
}
.fa-5x {
    font-size: 5em;
}

<head>
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Fonts en Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

    <!-- JQuery and Bootstrap.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="media-left">
    <i class="fa fa-search fa-5x text-white"></i>
</div>

希望这会有所帮助！

【讨论】：

【解决方案4】：

字体图标的主要限制是：它只能用于特定的字体大小以避免伪影 https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

正如@Dmitro 提到的，如果您不使用guaranteed 字体大小或使用内容的动态缩放，它可能会有所帮助

letter-spacing: 1px;

另外，下一个 CSS 调整也可能会有所帮助：

transform: rotate(0.03deg);

【讨论】：