Question

我在div中有一个带有文本的div。但是当添加glyphicon时会发生奇怪的行为，即单词之间的间距变得更大。

如何避免这种情况？

<div class="glyphicon  glyphicon-chevron-up">With glyphicon</div>
<div>Without glyphicon</div>

Demo of the issue

Demo of Implementation in my application

Answer 1

这个有用......

<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>

如果你不能使用它，那么使用这个：

 <div class="glyphicon  glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse"   href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new">
Glyhicon div with collapse</span>
<div class="collapse in" id="new">
Something goes here
</div>

然后您只能选择点击图标进行切换。

Answer 2

您可以为Glyphicons添加范围

<div><span class="glyphicon  glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>

它很好用，并且为glyphicons添加单独的跨度是一个很好的做法。您的代码中发生的是 glyphicon 类属性应用于您在 div 标记内编写的内容。

Answer 3

glyphicon类应用可以呈现符号的font-family : 'Glyphicons Halflings'。但是您已将文字添加到同一<div>内。因此该字体也将应用于您的文本。我已将文本移至另一个<span>并将所需的font-family : 'sans-serif'应用于文本。哪个解决了问题，或者只是将文本移出<div>，这也将有效

使用glyphicon 没有glyphicon

新类

.newFont{
      font-family: sans-serif
}

JdFiddle

Answer 4

如果你想避免使用文本，并且你想在glyphicon中写文本，你应该在bootstrap glyphicon类中添加before属性，这样它只会对之前的效果产生影响：

  /*add the :before to glyphicon */

      .glyphicon:before  {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      line-height: 1;

      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

使用带有文本的glyphicon时如何避免额外的空间？

4 个答案: