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

Posted 2023-03-06

【中文标题】如何在 bootstrap 3.0 中使用字形图标

【英文标题】：How to use glyphicons in 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。当然，在那种情况下，我也希望看到它起作用

【参考方案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>

更多信息：

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

顺便说一句。你可以使用这个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 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。