86

我已经在 bootstrap 2.3 中使用了 glyphicons，但现在我已经升级到 bootstrap 3.0。现在，我无法使用 icon 属性。

在引导程序 2.3 中，下面的标签正在工作

<i class="icon-search"></i>

在引导程序 3.0 中，它不起作用。

4

9 回答 9

108

图标（字形图标）现在包含在一个单独的 css 文件中。中......

标记已更改为：

<i class="glyphicon glyphicon-search"></i>

或者

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

这是 Bootstrap 3 的有用更改列表：http: //bootply.com/bootstrap-3-migration-guide

于 2013-08-13T09:47:20.557 回答
29

你去：

<i class="glyphicon glyphicon-search"></i>

更多信息：

http://getbootstrap.com/components/#glyphicons

顺便提一句。你可以使用这个转换工具，这也会更新图标的代码：

于 2013-08-13T09:48:09.223 回答
19

如果您下载定制的 bootstrap 3 发行版，您必须：

  1. 从 https://github.com/twbs/bootstrap/archive/v3.0.0.zip下载完整的发行版
  2. 解压缩并将调用的整个文件夹上传fonts到您的引导目录。与其他文件夹“css，js”放在一起。

之前的例子：

\css
\js
index.html

上传后的示例：

\css
\fonts
\js
index.html
于 2013-09-10T19:14:42.187 回答
6

如果您使用的是 less ，并且它没有加载图标字体，您必须检查字体路径转到文件variable.less并更改@icon-font-path path ，这对我有用。

于 2013-10-06T21:34:04.593 回答
4

Bootstrap 3 需要 span 标签而不是我

<span class="glyphicon glyphicon-search"></span>`
于 2014-12-16T07:36:04.117 回答
3

如果您使用 grunt 构建应用程序，则在构建过程中路径可能会发生变化。在这种情况下，您需要像这样修改 grunt 文件：

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },
于 2015-03-19T09:26:55.077 回答
3

包含字体 将所有字体文件复制到 CSS 附近的 /fonts 目录中。

  1. 包括 CSS 或 LESS 在项目中启用字体有两个选项：vanilla CSS 或源 LESS。对于 vanilla CSS，只需在存储库中包含/css中编译的 CSS 文件。
  2. 对于 LESS，将.less文件从/less复制到现有的 Bootstrap 目录中。然后通过@import "bootstrap-glyphicons.less"将其导入bootstrap.less ；. 准备好后重新编译。
  3. 添加一些图标！添加字体和 CSS 后，您就可以开始使用图标了。例如，<span class="glyphicon glyphicon-ok"></span>

资源

于 2013-08-13T09:50:02.047 回答
2

从引导程序下载所有文件，然后包含这个 css

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>
于 2015-09-21T07:50:15.223 回答
0

这可能会有所帮助。它包含许多有助于理解的示例。

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

于 2015-09-21T05:26:26.400 回答