Question

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

快照

以下是我的代码

<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;
    }

Answer 1

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

你也可以使用小搜索图标

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

它可能会解决您的问题

Answer 2

由于您使用display: table-cell;图标本身不是或至少不应该导致此问题。它可能是另一个table-cell导致这个或其他东西。由于我无法提供您的其他代码，因此我无法说出造成这种情况的原因，我只能帮助您解决其他问题。

由于您希望icon围绕一个方格，如何使用display: inline-block请参阅下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 3

它可能会解决您的问题eval(input())

Answer 4

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

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

letter-spacing: 1px;

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

transform: rotate(0.03deg);

Font Awesome Icon正在被切断

4 个答案: