如何在Bootstrap 3.0中使用字形图标

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

在Bootstrap 2.3中，以下标记起作用

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

在bootstrap 3.0中，它不起作用。

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

标记已更改为：

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

要么

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

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

你去了：

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

更多信息：

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

顺便说一句。您可以使用此转换工具，这还将更新图标的代码：

如果您下载自定义的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

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

Bootstrap 3需要span标签而不是i

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

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

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

资源

如果您使用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
            }]
        }
    },

从引导程序下载所有文件，然后包含此CSS

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

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

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