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

【问题标题】：How to avoid extra space when using glyphicon with text?使用带有文本的 glyphicon 时如何避免额外的空间？
【发布时间】：2016-07-19 09:15:00
【问题描述】：

我有一个 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

【问题讨论】：

你用错了，<div class="glyphicon glyphicon-chevron-up"></div>必须是空的，像<img src="" alt="" / >一样在后面或前面加上文字，而不是在里面；
如Bootstrap How To 中所述，“不要与其他组件混合” 和“仅用于空元素”。
@xpy 感谢您提供的信息，这是唯一的解决方案 :)

标签： css twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案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>

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

【讨论】：

这在我的情况下不起作用，因为我使用折叠将 glyphicon 与 chevron-down 切换，因为整个 div 需要data-toggle="collapse"
你需要把整个div相应地放好，然后我们才能看到真正的问题是什么

【解决方案2】：

如果你想避免文本并且你想在 glyphicon 中写入文本，你应该在引导 glyphicon 类中添加 before 属性，这样它只对 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;
    }

【讨论】：

【解决方案3】：

您可以为 Glyphicons 添加跨度

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

效果很好，为字形图标添加单独的跨度是一种很好的做法。您的代码中发生的情况是 glyphicon 类属性被应用于您在 div 标记中编写的内容。

【讨论】：

【解决方案4】：

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

带有字形没有字形图标

新课程

.newFont{
      font-family: sans-serif
}

JdFiddle

【讨论】：

不需要引入新的类； OP 只是错误地使用它们