logo标签列表

字体图标 Font Awesome Icon 被截断了

htmlcsstwitter-bootstrap-3font-awesome
3

左边的字体图标被切掉了。

快照

enter image description here

以下是我的代码

<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;
    }
1
对我来说运行良好 https://www.bootply.com/8SbYIL3uPY。如果您创建了更多的表格单元格，则可能是因为 - 如果某列占用了太多空间，则可能会导致其他单元格被压缩。 - Pete
无法复制您的问题 https://jsfiddle.net/tejaspatil6191/605zq8hc/ - Tej Patil
4个回答
2

这可能解决您的问题：letter-spacing: 1px;

最初的回答可能是这样的。

0

字体图标的主要限制是：为避免出现伪像，它只能与特定的字体大小一起使用。 https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

正如 @Dmitro 所提到的那样，如果您正在使用不是 保证 的字体大小或使用内容的动态缩放，这可能会有所帮助。

letter-spacing: 1px;

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

transform: rotate(0.03deg);
0

由于您正在使用display: table-cell;，因此图标本身不应该引起此问题。可能是另一个table-cell引起了这个问题，或者可能是其他原因。由于您没有提供其他代码，我无法确定是什么原因导致了这个问题，但我可以帮您提供另一种解决方案。

由于您希望icon围绕单个正方形，因此如何使用display: inline-block请参见下面的片段：

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

希望这能帮到你！

0

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

您也可以使用小搜索图标

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

这可能解决您的问题

不是的！字体大小并不是问题的原因。 - sairaj
然后你必须为 media-left 给予填充。 - Jalay Oza
我知道这个。我想知道为什么它被切断了。 - sairaj
由于字体宽度较大而元素宽度不够，因此它被截断了。如果您添加填充，则将从填充中占用5像素宽度，看起来就可以了。 - Jalay Oza
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接