Html 如何在bootstrap 3.0中使用图标

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

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

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

在Bootstrap3.0中，它不工作。

图标（glyphicons）现在包含在一个文件中

标记已更改为：

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

或

以下是Bootstrap 3的有用更改列表：

好了：

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

更多信息：

---

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

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

包括CSS或更少您有两个选项来启用字体 在您的项目中：香草CSS或源代码较少。对于香草CSS，只需 将/CSS中编译的CSS文件包含在存储库中

对于LESS，请将.LESS文件从/LESS复制到现有文件中 引导目录。然后通过@import将其导入bootstrap.less “引导图示符。较少”。准备好后重新编译

添加一些图标！添加字体和CSS后，您可以访问 使用图标。例如，

---

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

从下载完整的发行版

解压缩并将名为

font

的整个文件夹上载到引导目录。和其他文件夹“css，js”放在一起

之前的示例：

\css
\js
index.html

上传后的示例：

\css
\fonts
\js
index.html

---

如果您使用的字体较少，并且没有加载图标字体，则必须检查字体路径

---

转到文件变量.less并更改对我有效的@图标字体路径

引导程序3需要span标记而不是i

<span class="glyphicon glyphicon-search"></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>

@字体{
字体系列：“字形图标半身人”；
src:url（'/fonts/glyphicons-halflings-regular.eot'）；
}

Hi all，我也做了同样的事情，并跟进了结构，但没有得到正确的glyphicon…显示的是一个未识别的0101类型的图像，而不是GlyphIcontanks，实际上问题是我使用的是.less文件，没有将其转换为css…对于3.0.0版，默认情况下会中断。尝试了一些

解决方案

，没有人适合我。我看到这个问题是使用.less文件直接使用less.js解决的。当然，在这种情况下，我也希望看到它工作。嗨，所有人，我已经做了同样的事情，并跟进了结构，但没有得到正确的glyphicon…一个未识别的0101类型的图像显示而不是glyphicon。你能显示你的代码，包括引导和glyphicon CSS吗？您是否在浏览器控制台中看到任何错误？请确保正确包含glyphicons.css。它应该可以正常工作：我已经正确地添加了这个…结构是css/font/…，css/less/…，css/bootstrap.min.css，在bootstrap.min.css中，我包含了@import“less/bootstrap glyphicons.less”；单独的css文件链接似乎被破坏了。嗨，大家好，我也做了同样的事情，并跟踪了结构，但没有得到正确的glyphicon…显示了一个未识别的0101类型图像，而不是glyphiconBootply迁移，节省了大量时间将代码转换为TWB 3。非常有用，@Michael/Buhake-Sindi。请注意，这是不鼓励的，因此答案应该是寻找解决方案的终点（而不是另一个参考文献的中途停留，随着时间的推移，它往往会变得陈旧）。请考虑在这里添加一个独立的概要，将链接作为参考。这很好（Join 2016）。谢谢分享！

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