html - Bootstrap 图标不可见

标签 html twitter-bootstrap

在 bootstrap 的文档中,我阅读了有关图标的内容,并尝试将它们合并到我的文件中,如下所示

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Getting started with bootstrap</title>
<link href ="css/bootstrap.css" rel ="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<div class ="container-fluid">
    <header class= "row-fluid">
        <h1 class="span12" >This is my first Bootstrap page.</h1>
    </header>
   <i class="icon-calendar"></i>

</div>
<script src = "js/jquery-1.10.2.min.js"></script>
<script src = "js/bootstrap.min.js"</script>
</body>
</html>

但是什么也没发生。没有可见的日历图像。

最佳答案

好的,这就是答案。由于您使用的是 Bootstrap 3,因此您忘记包含图标包。您应该这样做:

<span class="glyphicon glyphicon-ok"></span>.
  1. 转到这里:http://glyphicons.getbootstrap.com/
  2. 点击从 Github 下载
  3. 解压缩该文件夹并将 CSS 文件夹内容复制到您自己的 CSS 文件夹中。
  4. 将 fonts 文件夹复制到 css 文件夹同一目录中。
  5. 添加字体和 CSS 后,添加如上所示的代码。

关于html - Bootstrap 图标不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18267157/

相关文章:

javascript - 使用 JavaScript 填充选择的选项以及删除它们

javascript - 将内容放入带有图标的列中

css - 更改导航丸的事件颜色

html - Bootstrap 词缀打破元素宽度

jquery - 将导航点添加到我的 jquery 产品幻灯片

html - 网站标题信息在 Firefox 中显示不同

html - 无法使用 Firebug 判断是什么导致了 div 之间的空白

html - 在小屏幕中将标题和段落左侧的图像对齐,然后在它们之间对齐

javascript - 使用数据表内的链接并使用分页时,绑定(bind)点击不起作用

html - 海报图片上的文字没有响应