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

这是超级奇怪，根据他们的指导here，我加了一个跨度glyphicon glyphicon-cog ....但是，当加载我的网页时，它实际上显示了信封 - 这是glyphicon glyphicon-envelope。究竟是如何发生的，我能做些什么来解决它？Bootstrap glyphicon-cog实际上显示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>

来源

2017-02-28 cbll

确保你不设置'文本转换：uppercase'重要的元素，因为大多数图标字体情况敏感 – haxxxton

@haxxxton我还没有使用过，所以我不认为这就是它！这只是超级怪异的行为。如果它们中的任何一个都没有工作，那么它们会有意义。 – cbll

您需要关闭具有** **而不是'' – JazZ

这样使用它： -

<span class="glyphicon glyphicon-cog"></span>

来源

2017-02-28 10:15:54 shanu

这个信封真的来自bootstrap吗？

因为它看起来不同。

您应该检查在开发工具，什么是真正覆盖的是span className="glyphicon glyphicon-cog"

的:before它应该是别的东西，而不是引导。

如果不解决，您可以将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>

来源

2017-02-28 10:29:43 Pankaj

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

回答

相关问题