javascript - Bootstrap : Why isnt my glyphicon showing?

标签 javascript twitter-bootstrap reactjs

编辑:我使用 JSX,其中 className = class。

我刚刚向我的 React 组件添加了一些 Boostrap,如下所示:

<div className="col-xs-2">
   <a onClick={this.deleteButtonClicked.bind(this, book)}><span className="glyphicon glyphicon-remove"></span></a>
</div>

但是字形图标没有显示在页面上。我确信我已经正确地将 Bootstrap 包含在我的项目中,因为网格系统可以工作。

这是生成的 HTML:

<a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>

你知道问题出在哪里吗?

编辑2:这是生成的CSS

box-sizing: border-box
color: rgb(2, 117, 216)
display: inline
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 16px
height: auto
line-height: 24px
width: auto

最佳答案

以下代码片段使用您的代码和 Bootstrap CSS 并且正在运行。因此,它必须是 CSS 链接中的内容或字体的可用性(URL 位于 CSS 中)。如果您在自己的服务器上使用 CSS,仅在项目中包含 CSS 是不够的。该字体也必须可用。

<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>
  </body>
</html>

关于javascript - Bootstrap : Why isnt my glyphicon showing?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36664243/

相关文章:

javascript - jquery mouseenter - mouseleave 不工作

javascript - 将 props 从 react-cosmos 传递到 styled-components

twitter-bootstrap - Twitter Bootstrap 始终可见的页脚

jquery - 更改元素后的文本

javascript - Twitter Bootstrap 模式出现在错误的位置,不居中且按钮不可点击

javascript - 访问和单击没有 ID 或类标签的按钮

javascript - 根据多个单选按钮选择显示或隐藏元素

javascript - React API 调用不改变状态

javascript - 如何在 React Native 中启用 Android 监视器以检查日志?

reactjs - react : Using NavLink in a shared component library imported as a node_module