如何在 bootstrap 3.0 中使用字形图标答案

【问题标题】：How to use glyphicons in bootstrap 3.0如何在 bootstrap 3.0 中使用字形图标
【发布时间】：2013-08-14 20:54:32
【问题描述】：

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

在 bootstrap 2.3 中，下面的标签正在工作

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

在 bootstrap 3.0 中，它不起作用。

【问题讨论】：

大家好，我也做了同样的事情并跟进了结构，但没有得到正确的字形图标...显示的是未识别的 0101 类型图像而不是字形图标
谢谢，实际上问题是我直接使用 .less 文件而不将其转换为 css...oops
对于 3.0.0 版本，默认情况下会中断。尝试了几个solutions，没有人适合我。
我看到这个问题直接使用 .less 文件使用 less.js。当然，在那种情况下，我也希望看到它起作用

标签： html css twitter-bootstrap-3

【解决方案1】：

图标（字形图标）现在包含在 separate css file.. 中。

标记已更改为：

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

或

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

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

【讨论】：

大家好，我也做了同样的事情并跟进了结构，但没有得到正确的字形图标...显示的是未识别的 0101 类型图像而不是字形图标
你能展示你的代码，包括 bootstrap 和 glyphicons CSS 吗？您是否在浏览器控制台中看到任何错误？
只要确保正确包含 glyphicons.css。它应该可以正常工作：bootply.com/61521
我已经正确添加了这个...结构是 css/fonts/....,css/less/...,css/bootstrap.min.css 和 bootstrap.min.css我已经包含了@import "less/bootstrap-glyphicons.less";
单独的css文件链接好像坏了。

【解决方案2】：

你去吧：

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

顺便说一句。你可以使用这个conversion tool，这也会更新图标的代码：

【讨论】：

Bootply 迁移节省了大量将代码转换为 TWB 3 的时间。非常有用，@Michael / Buhake-Sindi。

【解决方案3】：

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

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

之前的示例：

\css
\js
index.html

上传后的示例：

\css
\fonts
\js
index.html

【讨论】：

这很好用（2016 年 1 月）。感谢分享！

【解决方案4】：

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

【讨论】：

【解决方案5】：

Bootstrap 3 需要 span 标签而不是 i

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

【讨论】：

【解决方案6】：

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

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

source

【讨论】：

大家好，我也做了同样的事情并跟进了结构，但没有得到正确的字形图标...显示的是未识别的 0101 类型图像而不是字形图标

【解决方案7】：

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

【讨论】：

【解决方案8】：

从 bootstrap 下载所有文件，然后包含这个 css

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。