Bootstrap glyphicon-cog 实际上显示 glyphicon-envelope？答案

【问题标题】：Bootstrap glyphicon-cog actually shows glyphicon-envelope?Bootstrap glyphicon-cog 实际上显示 glyphicon-envelope？
【发布时间】：2017-07-19 02:19:29
【问题描述】：

这太奇怪了，根据他们的指导here，我添加了一个带有glyphicon glyphicon-cog 的跨度......但是，在加载我的页面时，它实际上显示了信封 - 即glyphicon glyphicon-envelope。这究竟是如何发生的，我该怎么做才能解决它？

我试过添加信封...因为也许他们交换了它。但它看起来仍然像一个信封，还是一样的。

glyphicon glyphicon-cog 最终显示的内容如下：

是这样添加的：

<div className="dropdown">
      <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          <h6 style={{fontFamily: "'Open Sans', sans-serif",
          fontSize: "12px", fontVariant: "small-caps"}}>
          settings </h6>
          <span className="glyphicon glyphicon-cog" />
      </button>
      <ul className="dropdown-menu" style={{textAlign: "center"}}>
          <li>
              <h5 style={{fontFamily: "'Open Sans', sans-serif", fontSize: "12px", fontVariant: "small-caps"}}>
                  user: {this.state.data.username} </h5>
          </li>
          <li style={{display: "inline-block"}}>
              <button onClick={this.resetLayout} className="btn btn-default" style={{fontFamily: "'Open Sans', sans-serif",
                  fontSize: "12px", fontVariant: "small-caps"}}>
                  reset layout </button>
          </li>
          <li style={{display: "inline-block"}}>
              <button className="btn btn-default" style={{fontFamily: "'Open Sans', sans-serif",
                  fontSize: "12px", fontVariant: "small-caps"}}>
                  <a href="/logout" style={{color: "black"}}> logout</a></button>
          </li>
      </ul>
  </div>

【问题讨论】：

确保您没有在元素上将text-transform:uppercase 设置为重要，因为大多数图标字体都区分大小写
@haxxxton 我根本没用过，所以我不认为是这样！这只是超级奇怪的行为。如果它们都不起作用，那将是有道理的..
您需要使用 </span> 而不是 <span ... /> 关闭 <span> 标签
请确认您已下载并使用最新版本的字体
@JazZ 没有什么不同（我猜不应该）。我想知道 webpack 是否没有正确编译我的字体...现在检查一下。

标签： html css twitter-bootstrap reactjs

【解决方案1】：

像这样使用它：-

&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt;

【讨论】：

【解决方案2】：

那个信封真的来自引导程序吗？

因为它看起来不一样。

您应该检查开发人员工具，实际上覆盖了 :before 的 span className="glyphicon glyphicon-cog"

它应该是别的东西，而不是引导程序。

如果无法修复，您可以手动将font-family 用作Glyphicon 和content 作为cog 的字符代码。

您可以在这里找到代码：https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="list-group">
  <li class="list-group-item"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-envelope</span> </li>
  <li class="list-group-item"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon glyphicon-cog</span> </li>
</ul>

【讨论】：